Forum Moderators: not2easy
I just figured out how to do this by experimenting a little and didn't see a similar tutorial anywhere online. I figured posting it here may help someone out in the future who heads here.
When using this just make sure your margin/padding bottom values are much greater than your site content will ever be. If you have pages with a lot of content you may want to change those 3000px values to something like 30000px, it doesn't really matter as long as they are both the same.
If you actually want to leave yourself a little padding/margin at the bottom just adjust the values slightly so that they aren't identical.
The overflow-y on your container will still let your actual page content extend the wrap div to whatever it needs to to accommodate your page's content, while chopping off the extra padding.
I've tested this in Firefox 3.x and Internet Explorer 8 and it works with both.
Html format as follows:
<div id="wrap">
<div id="header">
Header here
</div>
<div id="left_column">
Text here
</div>
<div id="right_column">
Text here
</div>
<div id="footer">
Footer here
</div>
</div>
CSS as follows:
#wrap {
overflow-y:hidden;
width:800px; /*Can be anything you want*/
}
#header {
/*Whatever header you want to set up*/
}
#left_column {
background:url('left_bg.jpg') repeat top left transparent;
float:left;
margin-bottom:-3000px;
padding-bottom:3000px;
width:200px;
}
#right_column {
background:url('right_bg.jpg') repeat top left transparent;
float:left;
margin-bottom:-3000px;
padding-bottom:3000px;
width:600px;
}
#footer {
clear:both;
}
-MDC
