Cross-browser footer on bottom of page

[Steve Mitchell]

The Pro CSS and HTML Design Patterns book promotion caught my eye because I'm struggling with a CSS issue. The goal was to fill the screen vertically and put the footer on the bottom of the screen. Sounds simple, right? I backed out the code (below) because it did not work on Firefox. It was fine on IE, but on Firefox the footer was in the middle of large content, or partially covered part of the content div when to switched the position to relative. Also, the height calculation in FireFox did not seem to account for the header so the user had to scroll to see to whole page.

I'm not looking for any troubleshooting here... I'm looking for a recommendation where I might find a proven, full-screen two-column CSS layout with a header and footer at the top and bottom of the window that is cross-browser compatible. I found a couple of sites that used JavaScript hacks to calculate screen height and dynamically position the footer. Surely there is another way?

Thanks,

Steve Mitchell
http://www.byteworksinc.com

CSS...
html, body {
height:100%;
margin:0pt;
padding:0pt;
}
body {
font-size:76%;
}
div#container {
min-height: 100%;
}
div#menu {
float:left;
width:230px;
}
div#content {
height:auto;
margin-left:230px;
}
div#footer {
bottom:0pt;
clear:left;
height:21px;
position:relative;
width:100%;
}

Additional HTML...
<!--[if lte IE 6]>
<style type="text/css">
#content { height: 100%; }
</style>
<![endif]-->

[Mike Bowers]

I have the perfect solution for you. Chapter 17 of my book presents design patterns that do exactly what you want.

You can see the solution in action at my website http://cssdesignpatterns.com. Chapter 17 discusses fluid layouts in detail (see http://cssdesignpatterns.com/Chapter%2017%20-%20LAYOUTS/index.html ).

The core design pattern is called Fluid Layout. It allows you to create layouts that can have any number of headers, footers, sidebars, etc. These layouts adapt fluidly to browsers with larger and smaller widths (such as cell phones, desktops, wide screens, etc). This pattern works in all major browsers including Internet Explorer 6 & 7, Firefox (all versions), Opera 9, and Safari 2. (See http://cssdesignpatterns.com/Chapter%2017%20-%20LAYOUTS/Fluid%20Layout/example.html )

The example at the end of the chapter pulls together all the techniques used in the chapter (see
http://cssdesignpatterns.com/Chapter%2017%20-%20LAYOUTS/Layout%20Example/example.html )

If you need a copy of my book fast, you can download an eBook version from Apress at http://www.apress.com/book/view/1590598040

[Steve Mitchell]

Sounds like just what I was looking for. I just placed my order. Thanks.

Steve Mitchell
http://www.byteworksinc.com