Typical CSS three column layout
You can’t have a css tutorial site without having a guide to making the usual three layout web page.
The two most common are the liquid and the fixed layouts.
First we’ll talk about the fixed, because that seems to be the easier of the two.
Fixed
This is what it is supposed to look like:
The CSS
<style type="text/css">
#maincontainer
{
position:relative;
width:400px;
margin:0 auto 0 auto;
padding:0px;
border:1px solid #000;
}
#left
{
background:#666;
float:left;
width:100px;
height:100px;
}
#center
{
background:#333;
float:left;
width:200px;
height:200px;
}
#right
{
background:#666;
float:left;
width:100px;
height:100px;
}
.clear
{
clear:both;
}
</style>
The HTML:
Next would be the HTML which should be put in between the <body></body> tags:
<div id="maincontainer">
<div id="leftcol">
</div>
<div id="center">
</div>
<div id="rightcol">
</div>
<div class="clear"></div>
</div>
That should be all for the fixed layout, and I usually like to go with this one.
Liquid
The only difference between this and the previous fixed layout is that this one expands and contracts depending on the size of the browser window.
The liquid center layout:
Here is the liquid center column CSS:
<style type="text/css">
#maincontainer
{
position:relative;
width:50%;
margin:0 auto 0 auto;
padding:0px;
border:1px solid #000;
}
#left
{
background:#666;
float:left;
width:100px;
height:100px;
}
#center
{
background:#333;
margin:0 100px 0 100px;
width:auto;
height:200px;
}
#right
{
background:#666;
float:right;
width:100px;
height:100px;
}
.clear
{
clear:both;
}
</style>
Place the following once again in between the <body></body> tags:
<div id="maincontainer">
<div id="leftcol">
</div>
<div id="rightcol">
</div>
<div id="center">
</div>
<div class="clear"></div>
</div>
Explanation:
It’s important to note that the “rightcol” comes before the “center.” If the “center” is put in between “leftcol” and “rightcol” in the HTML, the “rightcol” appears on the right side, but there is a gap with a height the same size as the “center” above it.
This is what it looks like if “center” was in between:
RSS feed for comments on this post
