Im working on a layout for a website and I’m trying to set up my css rules for the layout in the following image:
I want left & right divs to extend to the height of content div, I’m not very familiar with the clear attribute and how to use it. Here’s what I’ve done so far:
<!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=iso-8859-7">
<title>Untitled Document</title>
<style type="text/css">
<!--
html, body
{
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
#header {
background: url(images/header.png) no-repeat;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
clear: both;
padding: 15px;
width: 1013px;
height: 46px;
}
#wrapper {
clear: both;
width: 1043px;
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
height: 100%;
min-height: 100%;
}
#content {
background: #F00 url(images/fondo%20light.jpg) repeat;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
color: #333;
z-index: 1;
float: left;
width: 985px;
clear: none;
padding: 0px;
height: 150px;
}
#lines-left {
background: url(images/lines-left.png) no-repeat;
float: left;
width: 17px;
height: 100%;
margin-left: 13px;
}
#lines-right {
background: url(images/lines-right.png) no-repeat;
float: right;
width: 17px;
height: 100%;
padding: 0px;
margin-top: 0px;
margin-right: 11px;
margin-bottom: 0px;
margin-left: 0px;
}
body {
background: url(images/dark-pattern.jpg);
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFF;
margin: 0px;
}
#footer {
background: url(images/footer.png) no-repeat;
height: 140px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
clear: both;
padding: 15px;
width: 1013px;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="header">Content for id "header" Goes Here</div>
<div id="lines-left"> </div>
<div id="content">Content for id "content" Goes Here</div>
<div id="lines-right"> </div>
<div id="footer">Content for id "footer" Goes Here</div>
</div>
</body>
</html>
Adventures with CSS Fixed Positioning!
http://jsfiddle.net/XTdgP/
Since you want 100% height – which is a pain in the ass most of the time – and all your columns and rows seem to be of a fixed width/height, this becomes really easy with fixed positioning, which allows you to specify how far every edge of every container should be from the sides of the browser page.