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.