Nested Layouts with Less Divs

First to start out, this method relies heavily on the use of the CSS Calc as a unit value. This is fairly well supported on most modern browsers, but if you need to support old versions of IE (pre 9), this probably won’t work for you.

Ok now that we got that out of the way…

A currently very popular design style is what I call “nested layouts”. By this I mean the page is broken up into sections where the content is in the center, but some attribute such as a border or background color stretches the total width of the page.

The Example

A great example of this is one of my favorite sites GitHub :)

While the GitHub web site doesn’t actually use the code method I describe in this post, it is a good visual example of the design style:

So in our example we have three content sections:

Each of these have design attributes (background color/image) that stretch the whole width of the page, but the content is nested in the center of the page. To achieve this effect GitHub wraps each content section in an div that it is full width and contains the design attributes (background color/image.)

For our example lets focus on just the content section with the black iconed image background. We have a wrapping div with the styles for the background-image:

and then another div containing the content nested in the center using a fixed width with an auto margin, basicaly centering the content.

Why is this Bad?

Its not “bad”, it just adds a lot of extra unneccessary markup/divs which:

There is a better way! … IF you don’t have to worry about older browsers :)

Calc All the Things!

Calc is one of my favorite new things about CSS. If you haven’t played around with it, I highly recommend you do. Tt is immensely powerful and has enabled me to do so many amazing things without relying on absolute positioning and/or adding tons of extra markup.

The key is that calc allows the browser to use mixed units for units of measurements. For some good examples of calc is use, there is a great CSSTricks article that goes over some common design patters and how calc can be used to achieve them.

So how can calc help us from Divitis? Easily!

So lets start by simplifying our markup a little bit:

<header id="page-header" role="banner">
  <h1>Here Is Our Header!</h1>
</header><!-- /header#page-header -->

<div id="main" role="main">
  <p>Our Main "content" area.</p>
</div><!-- /div#main -->

<footer id="page-footer">
  A footer... cause, why not.
</footer><!-- /footer#page-footer -->

This is pretty clean and simple and we don’t really want to add any more markup just for the sake of our design. Using calc we can dynamically add padding to the left and right so that the content is centered, but the design styles will apply to the whole block.

Lets take our #main and style it with a black background with the content in a 1280px width nested in the center.

The Math

So the math here is we have the full page width (100%) and we need to take out a fixed pixel chunk for our content (1280px) and then the padding on either side is half of whatever is left … 50% of that for the right, 50% for the left:

Each margin: (100% - 1280px) / 2

We could do that with calc like this:

#main {
  background-color: black;
  padding-right: calc((100% - 1280px) / 2);
  padding-left: calc((100% - 1280px) / 2);

Now remember, calc is pretty new, so probably to be safe you might want to add the browser vendor prefixes (or use something like a preprocessor such as Sass with mixins to take care of it :

#main {
  background-color: black;
  padding-left: -moz-calc((100% - 1280px) / 2);
  padding-left: -webkit-calc((100% - 1280px) / 2);
  padding-left: calc((100% - 1280px) / 2);
  padding-right: -moz-calc((100% - 1280px) / 2);
  padding-right: -webkit-calc((100% - 1280px) / 2);
  padding-right: calc((100% - 1280px) / 2);

See It in Action

Using Codepen, I created a similar (yet even cleaner! Sass <3) version you can see in action:

See the Pen HKdCz by Lynn Wallenstein (@lynnwallenstein) on CodePen

Thats It!

Thats all it takes. Now I have a full width designed page, but centered content with beautiful semantic markup and no divitis!