Published: Monday, November 19th, 2007

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

HTML:
  1. <div id="header"> header stuff</div>
  2. <div id="left"> left stuff</div>
  3. <div id="center"> center stuff</div>
  4. <div id="right"> right stuff</div>
  5. <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.

If you're new here, you may want to subscribe to my Full RSS feed. Thanks for visiting!