Forum Moderators: not2easy
Code.
<!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: #FFFFFF;
width: 150px;
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%;
height:100px;
left: 0px;
top: 0px;
background: #999999;
height: 100%;
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 dolor ....
... LOTS OF CONTENT TO CREATE A SCROLL....
</p>
<br class="clear_float" />
</div>
</div>
</body>
</html>
I am aware that most will see this as an easy fix. But FYI... I am also going to want to do the same with the #left_container as well and then add a footer that remains absolute at the bottom of the page no matter how much content is on the page. But I want to fix this problem first.
Any Ideas?
