Create 3 Column CSS Layouts Like A CSS God!

Here’s the kindergarten version of a 3 Column CSS layout that you’re going to get from most other websites:

<div id="header">header stuff</div>
<div id="left">left stuff</div>
<div id="center">center stuff</div>
<div id="right">right stuff</div>
<div id="footer">footer stuff</div>

Simple enough right? The alignment is done in your style sheet, where the left would float left, the center would also float left and the right would float right.

You could set all your styles based on these column ids. Whether it’s background images or just background colors, the sky’s the limit here. But here’s the kicker: your column heights are all dependent on how much text you have in each div. Leaving you with a messy, uneven mess.

Wrap It Up Before Messing With CSS

There’s the easy way and there’s the hard way, which a lot of people mistake for the right way. If you’re looking for the hard way, then you need to look somewhere else. Try Googling “3 column css hack ie ns, oh crap this doesn’t look right, wtf”. That should lead to to the pain that you searching for.

On to the easy way: Wrappers, wrappers, wrappers. No, I’m not talking Biggie and 2Pac, I’m talking about wrapper divs (just as cool as Biggie). The good news is that all the HTML stays the same. You simple wrap the left, middle, and right in three wrapper divs: wrap-left, wrap-middle, wrap-right. Now here’s the magic.

All your backgrounds are going to be set in those wrapper divs, that’s all:

#wrap-right{
padding: 0;
margin: 0;
/*margin-left: 3px;*/
width:100%;
background:url("../images/right.gif") repeat-y top right;
}

#wrap-left{
padding: 0;
margin: 0;
width:100%;
background:url("../images/left.gif") repeat-y top left;
}

#wrap-middle{
padding: 0;
margin: 0;
width:100%;
/* notice middle image starts at 198px - where left would have stopped. */
background:url("../images/middle.gif") repeat-y 198px 0px;
}

That’s all there is to it. This works fine with background images or simply colors.

Theoretically, this could be simplified even further to use one wrapper div if we have one background image that spans the entire length.