• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

Cross-browser footer on bottom of page

 
Steve Mitchell
Greenhorn
Posts: 12
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Posts: 42
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Posts: 12
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Sounds like just what I was looking for. I just placed my order. Thanks.

Steve Mitchell
http://www.byteworksinc.com
 
The knights of nee want a shrubbery. And a tiny ad:
a bit of art, as a gift, that will fit in a stocking
https://gardener-gift.com
reply
    Bookmark Topic Watch Topic
  • New Topic