Получается вот такая беда:
Стили:
* {
margin:0;
padding:0;
}
/* Задаем цвет фона светлосерый и растягиваем область документа на 100% по высоте */
body, html {
background-color:#e6e6e6;
height:100%;
}
div#container {
width:880px;
min-height:100%;
background-color:#fff;
z-index:0;
margin:0 auto;
position:relative;
}
div#header {
width:880px;
height:175px;
background-color:orange;
z-index:1;
position:relative;
}
div#menu {
width:630px;
height:40px;
margin-left:250px;
float:right;
background-color:lightgreen;
z-index:2;
position:relative;
}
div#content {
background-color:#cc0000;
width:630px;
height:auto;;
z-index:3;
position:relative;
margin-left:200px;
float:right;
}
div#sidebar {
background-color:#ccc;
width:250px;
min-height:350px;
z-index:5;
position:relative;
margin-top:-40px;
}
div#footer {
background-color:gold;
width:630px;
height:50px;
z-index:4;
position:relative;
margin-top:25px;
clear:both;
}
<div id="container">
<div id="menu"></div>
<div id="content"></div>
<div id="sidebar"></div>
<div id="footer"></div>
</div>
Это элементы DIV.
<div id="container">
<div id="header"></div>
<div id="menu"></div>
<div id="content"></div>
<div id="sidebar"></div>
<div id="footer"></div>
</div>
Точнее вот так! HEADER пропустил!