Forum Moderators: not2easy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
<!--
* {
margin: 0px;
padding: 0px;
}
html, body {
height: 100%;
}
body {
font: 10px Verdana, Arial, Helvetica, sans-serif;
background: #FFFFFF;
}
#header_container {
height: 100px;
width: 800px;
position: absolute;
z-index: 10;
left: 0px;
top: 0px;
background: #FFFFFF;
}
#header_top {
background: #CCCCFF;
height: 79px;
}
#header_bottom {
background: #FFFFFF repeat-x left top;
height: 20px;
border-bottom: 1px solid #000000;
}
#left_container {
background: #cccccc;
width: 150px;
min-height:100%;
position: relative;
left: 0px;
top: 0px;
clear: left;
float: left;
}
#menu_box {
padding-top: 110px;
border: 1px solid #000000;
}
#right_container {
width: 649px;
border-left: 1px solid #000000;
min-height:100%;
left: 0px;
top: 0px;
background: #999999;
float:left;
}
#right_content {
padding: 110px 10px 10px;
}
.clear_float {
font-family: 0;
line-height: 0px;
}
-->
</style>
</head>
<body>
<div id="header_container">
<div id="header_top">Content for id "header_container" Goes Here</div>
<div id="header_bottom"></div>
</div>
<div id="left_container">
<div id="menu_box">Content for id "left_container" Goes Here</div>
</div>
<div id="right_container">
<div id="right_content">Content for id "right_container" Goes Here
<p>Lorem ipsum ...
LOTS OF CONTENT TO MAKE THE PAGE EXTEND AND SCROLL
</p>
<br class="clear_float" />
</div>
</div>
</body>
</html>
That makes your backgrounds on the floats not work as columns, so you need to switch there to faking the columns on the background of the body itself.
If you need it with fluid width, search for "flexy-floats", you'll find a technique promoted by SuzyUK ...
