A Three-Column, Fluid Center Layout
With flush header and footer ...and no JavaScript!
A few years ago, this type of layout was considered the "Holy Grail" of layouts, and based upon browser capabilities, and CSS not being quite mature enough, I would have to agree. Lots of people came up with some great ways to achieve this: Some used pure CSS, others used JavaScript to make the left and right columns line up vertically with the content.
Unfortunately, almost all solutions of the time involved using CSS hacks or lots of JavaScript; not too desireable, to say the least. But with CSS2, and much better browser technology, we can easily achieve this layout using nothing but CSS - and NO HACKS!
First of all, it starts with the document structure:
<div id="header"></div>
<div id="mainContainer">
<div id="subContainer">
<div id="leftSide"></div>
<div id="rightSide"></div>
<div id="content"></div>
<div class="clr"></div>
</div>
</div>
<div id="footer"></div>
I know what you're thinking... seven containers! Well...actually only six content containers and a single clearing div (more on that later). If you were surprised by the number of containers, you were probably expecting to see five containers. The reason for using six is that we're taking advantage of CSS allowing us to layer our backgrounds...
Layered backgrounds? Yes, that's right. You see, what makes the vertically flush layout possible is the use of small background images in the mainContainer and subContainer divs. In fact, the leftSide and rightSide divs do not expand or contract vertically in sync as the horizontal width of the page grows or shrinks. It's merely the backgrounds of the containers! From that point of view, we just don't care what their vertical sizes are. Click here to see the left and right containers' actual size. Here's the CSS that makes it possible.
body { margin:0; padding:0;}
#header,#mainContainer,#footer {
width: 90%;
margin:0 auto;
border: 1px solid #666;
}
#header {
background:#ddd;
border:1px solid #666;
margin-top:10px;
}
#mainContainer {
border-top:0;
border-top:0;
border-bottom:0;
background: url(left.gif) repeat-y;
padding:0;
}
#subContainer {
background: url(right.gif) repeat-y right;
}
#leftSide { float:left; width:190px; padding:5px;}
#rightSide { float:right; width:190px; padding:5px;}
#content { margin:0 210px 0 210px; padding:5px 0;}
#content h1 { margin:0;padding:0 }
.clr { clear: both;}
Our Friend the Clearing Div
What makes the containers expand their backgrounds vertically is the use of an empty div that has a single CSS property: clear:both. One of the problems with using floating divs is that any floating elements placed within a non-floating element will break out of the container's vertical boundaries, unless a clearing element exists below the floating containers. Thus, our use of an empty div that simply clears both.
As long as the clearing div resides within the containers, but beyond the content divs, the backgrounds will stretch and give the appearance of the columns growing and shrinking in sync.
So there you have it, a three-column layout with flush header and footer - no JavaScript, no CSS hacks!