View Full Version : Browser height v's div height

05-26-2008, 10:47 AM
This one seems pretty straight forward.
How would I set a simple page up with a header div up the top, two divs in the middle, and a footer which is always on the bottom of the browser? I have set-up the following as a test at http://test.adelaideweb.com.au:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin: 0px;
padding: 0px;
height: 100%;
#container {
height: 100%;
width: 800px;
margin-right: auto;
margin-left: auto;
background-color: #009900;
#header {
height: 100px;
width: 800px;
float: right;
background-color: #FF6600;
#left {
height: 100%;
width: 100px;
float: left;
background-color: #0000FF;
height: 100%;
width: 100px;
float: right;
background-color: #FF0000;
#footer {
height: 100px;
width: 800px;
clear: both;
background-color: #FFFF00;
<div id="container">
<div id="header">Content for id "header" Goes Here</div>
<div id="left">Content for id "left" Goes Here</div>
<div id="right">Content for id "right" Goes Here</div>
<div id="footer">Content for id "footer" Goes Here</div>

If a height of the container is 100%, I expected any 100% height divs inside the container to only go the height of the browser, but as you can see it doesn't do this. How can I get the footer to always sit at the bottom of the browser, without adding the value height of the header height? What am I missing?

Shane S

05-26-2008, 04:10 PM
I don't know if there is a CSS solution, I know there are CSS templates in DW but I don't have DW, Yahoo! dev center also has CSS templates so they might have one that does what you want.

I have done what you want by adding some JavaScript, it took a few goes to work in all browsers but this seems to work in IE6, IE7, Safari, FF and Opera 9+

The above is an example of what I just cooked up off the top of my head, if you were to use it you would need to test thoroughly first and ensure it is 'production ready'. I'm sure this is such a common request/problem that there must be a robust tried and tested solution already out there. I'm too busy today to look but I hope the above gives you a poke in the right direction.

05-26-2008, 06:34 PM
I think it's called 'CSS persistent footer', try googling ti.