wood burning stoves*
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
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
Author

Cross-browser footer on bottom of page

Steve Mitchell
Greenhorn

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?

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
Author
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 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
Greenhorn

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

Steve Mitchell
http://www.byteworksinc.com
 
It is sorta covered in the JavaRanch Style Guide.
 
subject: Cross-browser footer on bottom of page