View Full Version : height of content in browsers

Mar 16th, 2010, 11:09 AM
please take a look at this link

my question is how the footer appears in different browsers

the div which holds the content for all pages is #contentouter and i have set it to
#contentouter {
float: left;
width: 967px;
height: 400px;

with this height setting in firefox, ie the footer div exactly touches the bottom of the browser however in chrome and safari there is a small vertical gap from where the footer div ends and the bottom of the browsers that i am viewing

is it because i have few toolbars in firefox and ie after the address bar and due to this the footer div touches the bottom of the browser when compared to chrome and safari where i do not have any toolbars after the address bar and i guess similarly for other browsers that do not have toolbars after the address bar

if i change the height of #contentouter to 500px then in all browsers the footer div appears the same in all browsers

should i be using height: 100% for body and html tags in css

what is the ideal solution in this case

please advice and also any code that i need to use to fix this


Mar 16th, 2010, 05:20 PM
Hello sudhakararaog,
The footer is not even close to the bottom of the browser window for me, in any browser.
You should give this full height method (http://nopeople.com/CSS/full-height-layout/index.html) a try.