Three columns layout without table

Computer monitors are getting bigger and bigger, so do the html pages. People start to add more columns into the layout.
To create a three columns layout, in a very traditional way you can do it in a table, like this:

<table>
  <tr><td>Left</td><td>Main</td><td>Right</td><tr>
</table>

There are some obvious downside on this:

• Mix data and presentation
• Not browser friendly, try to browser this use a mobile phone? I am not saying iPhone or iPod Touch.

So how to fix it? You can use css with “position: absolute;” or “Float”:

<div id="wrapper">
  <div id="main">
    <div id="sideleft">Left column</div>
    <div id="sideright">Right column</div>
    <div id="content">Content</div>
  </div>
</div>

#wrapper {width: 800px;}
#main {margin-top: 10px;}
#sideleft {float: left; width: 200px; border: 1px solid black; background-color: #dddddd;}
#sideright {float: right; width: 200px; border: 1px solid green; background-color: #99ff99;}
#content {border: 1px solid blue; background-color: #9999ff; margin: 0 20px 0 10px;}

Want to know more?

• Practical CSS Layout Tips, Tricks, & Techniques
• Three column layout, without tables
• Book: HTML Utopia: Designing Without Tables Using CSS