html файл
<html>
<head>
<title>Div test</title>
<link href="tmp.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="main">
<div id="heder">heder</div>
<div id="content">
<div id="left">left</div>
<div id="right">right</div>
<div id="border"></div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>
css файл
@import url(reset.css);
body,html {
height: 100%;
background-color: #1C851B;
}
#main {
margin-left: 204px;
margin-right: 204px;
width: 938px;
}
#heder{
width: 938px;
background-color: #F75454;
}
#content{
width: 938px;
}
#left{
width: 195px;
float: left;
background-color: #0755A8;
}
#right{
width: 743px;
float: left;
background-color: #2FDE2C;
}
#border{
height: 50px;
}
#footer{
position:absolute;
height: 40px;
margin-left: auto;
margin-right: auto;
width: 938px;
background-color: #FA9100;
clear: both;
bottom: 0;
}
файл css reset
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
padding: 0;
margin: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset,img {
border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-weight: normal;
font-style: normal;
}
ol,ul {
list-style: none;
}
caption,th {
text-align: left;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
font-size: 100%;
}
q:before,q:after {
content:'';
}
abbr,acronym { border: 0;
}
P.S.
основа потребность в том чтобы все блоки блока content - сразу растягивались до Footer - даже когда они будут пустые