a 3 column layout. one column each side of main content.
here's what it looks like. the two side columns are 25% each and the remaining content 50%
the content and sidebars all have wrappers because we wouldnt be able to apply padding to them - that would add to the width and break the floats. so we use a wrapper, and the inner div has a margin applied to it, to push it away from the edge.
...content...
...content...
...content...
...content...
<div id="wrapper">
<div id="header">
<h1>header</h1>
</div>
<ul id="navigation">
<li><a href="">a link</a></li>
<li><a href="">another link</a></li>
</ul>
<div id="sidebarLeftWrap">
<div id="sidebarLeft">
...left sidebar...
</div>
</div>
<div id="contentWrap">
<div id="content">
<p>...content...</p>
<p>...content...</p>
<p>...content...</p>
<p>...content...</p>
</div>
</div>
<div id="sidebarWrap">
<div id="sidebar">
...right sidebar...
</div>
</div>
<div class="clear"><!-- clear --></div>
<div id="footer">
...footer...
</div>
</div><!-- // wrapper -->
#wrapper_TEST3
{
margin:0;
background:#252F30;
}
#header_TEST3
{
background:#7FA629;
position:relative;
}
#header_TEST3 h1
{
margin:0;
padding:1em;
font-size:1em;
}
#navigation_TEST3
{
background:#A4CC48;
margin:0;
padding:1em;
list-style-type:none;
position:relative;
}
#navigation_TEST3 li
{
display:inline;
margin:0 1em 0 0;
}
#sidebarLeftWrap_TEST3
{
float:left;
width:25%;
background:#CD1A52;
}
#contentWrap_TEST3
{
width:50%;
float:left;
background:#005FB5;
}
#content_TEST3,
#sidebarRight_TEST3,
#sidebarLeft_TEST3
{
margin:1em;
}
#sidebarRightWrap_TEST3
{
float:left;
width:25%;
background:#2289E8;
}
#footer_TEST3
{
clear:both;
padding:1em;
background:#7DA028;
}
.clear
{
clear:both;
}