CSS Code

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>
Share

Leave a Reply

Your email address will not be published. Required fields are marked *

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Anti-spam image