Styleable full-width bars

Full-width backgrounds on individual regions, without additional elements.

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% - /* ½ of desired width, e.g. for 32em we 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.