There is a particular layout that I’ve seen a lot of when we talk enterprise content management. It basically layers each section of a website into logical strata based on the hierarchy of the site. These sections then spread their on-brand color scheme all the way across your browser window, daring you to view it in full screen mode. It appeals to me for the straightforward semantics of it all. These layers are stacked upon each other like cream and fruit in a parfait.

The Parfait

The trick is to use a stack of DIVs to create the horizontal bands. Since a DIV is a regular HTML block element it will extend horizontally to fill it’s container. If that container has no constraints, it will expand to fill the entire browser window, like a magenta sunset. Or one of those really long 32-bump LEGO parts that just go on and on. You set the background colors and gradients on this element to get similar effects for your site.

Once you have your stack of DIVs (#Header, #Menu, #Main, #Footer, etc.) then you add another element just inside of each of them. I use a DIV with a class of “site-inner.” You could use any other trivial name for subcutaneous. Instead of applying the usual centered-site design pattern to a wrapper around the entire site, we apply it to many wrappers inside the stacked DIVs. To get CSS to apply to multiple items, we use classes.

On our DIV.site-inner, we mix our usual centered-sited cocktail:

body {
    text-align:center; /* Ensures margins work as expected in prehistoric browsers. */
}

.site-inner {
    margin:0 auto;
    position: relative;
    text-align:left /* Undo the centering. */
    width:600px; /* Fixed-width, your choice. */
}

That way, each of the site-inner sections are the width of the site. Adjust everything else as needed.

See the in-line demo here.