Three Column Layout with CSS-2

It's pretty easy to create a table-less layout using 'float'… if your site is two columns in layout. But if you've tried to add in that third column, you're probably just about ready to go back to tables! Well here's the simple CSS code you can use to achieve those three columns in any CSS-2 compliant browser.

<style type="text/css" media="screen">
<!--
div {
     border: 1px solid #333;
}
#top { 
     position: absolute; 
     top: 0; 
     left: 0; 
     min-width: 600px; 
     width: 100%; 
     height: 100px; 
}

#left { 
     position: absolute; 
     top:100px; 
     left: 0; 
     width: 20%; 
     margin-top: 1%; 
}

#middle { 
     position: absolute; 
     top:100px; 
     left:20%; 
     min-width: 360px; 
     width: 58%; 
     margin: 1% 1% 0 1%; 
}

#right { 
     position: absolute; 
     top:100px; 
     left: 80%; 
     width: 20%; 
     margin-top: 1%; 
}
//-->
</style>

<div id="top">
top section
</div>
<div id="left">
 left column
</div>
<div id="middle">
middle column
</div>
<div id="right">
 right column
</div>