File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
The moose likes HTML, CSS and JavaScript and the fly likes Cross-browser footer on bottom of page Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login

Win a copy of REST with Spring (video course) this week in the Spring forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Cross-browser footer on bottom of page" Watch "Cross-browser footer on bottom of page" New topic

Cross-browser footer on bottom of page

Steve Mitchell

Joined: Jun 03, 2001
Posts: 12
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?


Steve Mitchell

html, body {
body {
div#container {
min-height: 100%;
div#menu {
div#content {
div#footer {

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

Joined: Oct 08, 2007
Posts: 42
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 Chapter 17 discusses fluid layouts in detail (see ).

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 )

The example at the end of the chapter pulls together all the techniques used in the chapter (see )

If you need a copy of my book fast, you can download an eBook version from Apress at
Steve Mitchell

Joined: Jun 03, 2001
Posts: 12
Sounds like just what I was looking for. I just placed my order. Thanks.

Steve Mitchell
jQuery in Action, 3rd edition
subject: Cross-browser footer on bottom of page
It's not a secret anymore!