This is a request I see quite often across the web…can it be done? Actually, it can be done and here’s the method behind it (demo). Only the relevant tags are commented on.
CSS Breakdown
color: #000;
font:normal normal 12px/15px “Lucida Grande”, Verdana, Arial, Helvetica, serif;
background-color: #eee;
text-align: center; /* for IE */
height: 100%; /* force relative page heights globally */
margin:0; /* removes all the margins to prevent scrollbars from popping up here and there */
padding:0; /* removes all the padding to prevent scrollbars from popping up here and there */
border:0; /* removes all the borders to prevent scrollbars from popping up here and there */
}
#container {
margin:0 auto; /* centers the content */
width:950px;
text-align:left;
min-height:100%; /* self explanatory but this isn’t supported in IE… this is what makes the design full height in non-IE browsers */
background:#999;
}
* html #container { height: 100%; } /* this is the key component that allows the footer to be forced downward preventing the content from flowing over footer and clears up the min-height issues with IE */
#container a {
color:#222;
text-decoration:none;
}
#container a:hover {
color:#000;
text-decoration:underline;
}
#header {
height:65px; /* note the header height */
background:#555;
font:bolder normal 4.3em/1.8em “Lucida Grande”, Verdana, Arial, Helvetica, serif;
color:white;
overflow:hidden;
padding:0 0 0 26px;
font-weight:bolder;
}
#contentwrap {
width: 950px;
padding-bottom:20px; /* prevents the footer from butting up to the content…that’s the only purpose for the inclusion of this and is only for asthetics */
}
#content {
background:#777;
margin:20px 20px 75px 20px; /* 75px top margin is to push the content below the header */
padding:10px;
color:white;
}
#content h2 { margin:0; }
#footer {
height:75px;
width:950px;
margin:0 auto;
background:#333;
text-align:left;
margin-top:-75px; /* prevents the page from being 100% plus the height of the footer and scrolling at all times */
overflow:hidden; /* prevents any overflow from making the screen scroll all the time */
}
#footer div {
margin:20px 0 0 30px;
color:white;
font:bolder normal 1.6em/1.6em “Lucida Grande”, Verdana, Arial, Helvetica, serif;
font-weight:bolder;
}
The HTML
<!–BEGIN CONTAINER–>
<div id=”container”>
<!–BEGIN HEADER–>
<div id=”header”>HEADER</div>
<!–END HEADER–>
<!–BEGIN CONTENTWRAP–>
<div id=”contentwrap”>
<!–BEGIN CONTENT–>
<div id=”content”>CONTENT</div>
<!–END CONTENT–>
<div style=”clear:both;”></div>
</div>
<!–END CONTENTWRAP–>
</div>
<!–END CONTAINER–>
<div id=”footer”>
<div>FOOTER</div>
</div>