CSS - Extending beyond the .container

05 Aug 2021

It’s quite common for websites to be built with ‘containers’ - divs with a max-width CSS property that are centrally aligned. These containers will be re-used throughout the document to keep content aligned so there is a consistent amount of spacing (or ‘bleed’, to use the publishing term for it).

Bootstrap does this with its .container class.

But what if you want to respect that bleed on only one side, and extend the content on the other (this would be called ‘full-bleed’ in publishing)?

Like this component here:

Components that use this technique are becoming more common, so if you want to use them in a layout with containers, you’ll need to employ a little CSS trickery since the bleed / padding is of an unspecified size as the document shifts.

Here’s how I solved the problem:

.container-align-r {
  @media (min-width: 1200px) {
    margin-left: calc((100vw - 1140px) / 2);
  }
}

So all you have to do is not use the container class (or use .container-fluid in the case of Bootstrap) and then apply the above utility class to that div. The math is quite simple - subtract the size of the container (at that width) from the overall viewport width and then divide that by 2 (two being the ‘bleed’ each side of the container).

If your containers have different max-width sizes at differnet media queries (as in Bootstrap) then you can do something like this:

.container-align-r {
  @media (min-width: 576px) {
    margin-left: calc((100vw - 540px) / 2);
  }

  @media (min-width: 768px) {
    margin-left: calc((100vw - 720px) / 2);
  }

  @media (min-width: 992px) {
    margin-left: calc((100vw - 960px) / 2);
  }

  @media (min-width: 1200px) {
    margin-left: calc((100vw - 1140px) / 2);
  }
}