CSS 100% height with full width Header

programming web dev
1

Hi,

I have found a lot of tutorials on how to have 100% height and the footer to stay at the bottom. I have that working but I get scrolling the exact height of my header because my header is not in my container DIV. I need it to be outside of the Container because the Header’s width expands as wide as the browser but the rest of the page within the Container has a fixed with of 800px. I cant find anything on how to get this to work.

HTML Code
<body>

<div id=“header”>
<h1>Header</h1>
<!-- end #header --></div>

<div id=“container”>

<div id=“sidebar2”>Crumb Navigation
<!-- end #sidebar2 --></div>

<div id=“sidebar1”>
<h3>Main Menu</h3>
<p><BR /><BR /><BR /><BR /><BR /><BR /></p>
<p><BR /><BR /><BR /><BR /><BR /><BR /></p>
<p><BR /><BR /><BR /><BR /><BR /><BR /></p>

<!-- end #sidebar1 --></div>

<div id=“mainContent”>
<h1> Main Content </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. </p>
<!-- end #mainContent --></div>

<br class=“clearfloat” />

<div id=“footer”>
<p>Footer</p>
<!-- end #footer --></div>

<!-- end #container --></div>

</body>

CSS Code
html,body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
height:100%; /* needed for container min-height */
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}

#container {
position:relative; /* needed for footer positioning*/
margin: 0 auto;
width: 800px;
background: #FFFFFF;

text-align: left;
height:auto !important; /* real browsers /
height:100%; / IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
#header {
background: #DDDDDD;
padding: 0 10px;
}

#header h1 {
margin: 0;
padding: 10px 0; }

#sidebar1 {
float: left;
width: 11em;
background: #EBEBEB;
padding-top: 10px;
padding-right: 0;
padding-bottom: 15px;
padding-left: 0;
}
#sidebar2 {
background: #999999;
padding: 15px 15px;
text-align: right;
}
#sidebar1 h3, #sidebar1 p, #sidebar2 p, #sidebar2 h3 {
margin-left: 10px;
margin-right: 10px;
}

#mainContent {
padding-top: 0em;
padding-right: 1em;
padding-bottom: 5em;
padding-left: 12em;
}
#footer {
position:absolute;
background:#DDDDDD;
width:100%;
bottom:0px; /* stick to bottom */
left: 0px;
}
#footer p {
margin: 0;
padding: 10px; }

.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}