This works as long as the side column is shorter than the main column.
View it here: http://www.manisheriar.com/wsg/twoColumn/
html:
<div id="container">
<div id="header">
<h1>This is the Head</h1>
</div><!-- end head -->
<div id="wrapper">
<div id="content">
<h2>This is the content.</h2>
... several paragraphs here ...
</div><! -- end content -->
<div id="sidebar">
<h3>This is the sidebar</h3>
... list here ...
</div><!-- end sidebar -->
</div><!-- end wrapper -->
<div id="footer">
<h4>This is the footer</h4>
</div>
</div><!-- end container -->
css:
body {
font:normal .9em/1.2em Verdana,Arial,Helvetica,sans-serif;
color:#333;
padding:20px 40px;
background-color:#333333;
}
#container {
border:10px solid #fff;
}
#header {
background-color:#FFCCFF;
border-bottom:10px solid #fff;
padding:20px;
}
#wrapper {
position:relative;
background-color:#CCCC99;
}
#content {
margin-left:160px;
background-color:#FFFFCC;
padding:20px;
border-left:10px solid #fff;
}
#sidebar {
position:absolute;
top:0;
left:0;
width:140px;
padding:10px;
font-size:90%;
}
#footer {
clear:both;
border-top:10px solid #fff;
background-color:#99CCCC;
padding:20px;
}
HTH,
Mani
Mani Sheriar
Sheriar Designs | www.ManiSheriar.com
925.952.4365 (landline) | 925.914.0741 (cell)
******************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************
