Style-able Full-Width Bars

There are many ways to align page text in a centered column while still being able to apply full-width backgrounds on individual regions. How about one without the need for additional elements?

Instead of creating a centered .container like this …

.parent.container {
  width: 32em;
  margin: 0 auto;

…, which then contains one or more children breaking out from center so you can apply a full-width background on them, let us add .container to every child. These children now no longer need a parent and you can use padding instead. To make this work we let calc() do the magic.

.orphan.container {
  padding: 0 calc(50% - 16em); /* ½ of desired width, e.g. for 32em we have to use 16em */

Good to know:

  • Requires no nested elements just for adding style hooks.
  • The actual width is not specified anywhere but implied, see padding.
  • Does not (need to) work in combination with min/max-width.
  • Does not cause an accidental horizontal scrollbar.

So much for the overall concept. Make sure to check out the result where I added some media query goodness.