CSS Layout in Firefox - Background Height

Posted on 2007-09-30
Medium Priority
Last Modified: 2013-12-07
This layout works fine in IE, but in Firefox the background height is fixed to the size of the window when it first loads.  If the page length is longer and I scroll down, the background is white and the side bars don't extend. Any ideas on how to fix this?

<body style="margin:0px; padding:0px; height:100%;">
<form style="height:100%;">
<div style="background-color:#336699; height:100%; width:100%; text-align:center;">
      <div style="margin:auto; width:900px; height:100%; background-color:#ffffff;">
            <div style="position:relative; height:100%; width:100%;">
                  <div style="position:absolute; top:0px; left:-10px; width:10px; height:100%; background-color:#000000;">

                  <div style="position:absolute; top:0px; left:900px; width:10px; height:100%; background-color:#000000;">

                  <div style="position:relative; height:100%; width:100%;">
                        <div style="width:100%; height:50px; background-color:#666666;">
                        <div style="width:100%;">
                              <div style="float:left; width:185px; background-color:#999999;">
                                    <br /><br /><br /><br /><br /><br /><br /><br />
                              <div style="float:right; width:715px; background-color:red;">
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
Question by:collages
LVL 10

Expert Comment

ID: 19987938
It is difficult to get DIV's to follow suit with other DIV's in terms of height. I think you are probably better looking at using tables at least for the basic layout.
LVL 17

Accepted Solution

mreuring earned 2000 total points
ID: 19988245
I recommend understanding of the cause, this will help you learning css in such a way that you can learn to design beyond the boring limitations of tables, as well as keeping your html pure and readable.

The problem starts with the definition of height: 100%. This means essenetially it should be as height is the nearest ancestor with a defined height. Now, in case of the body tag that means the browser viewport. Thus, setting the body to a height of 100% should make as high as and no higher than the view-port. As a result Firefox is correctly limiting your background to the height of the viewport.

Internet Explorer incorrectly stretches any element beyond its' defined height and width when the content of the element exceeds the defined boundaries. This is a unique behaviour of the Microsoft stable. It does however provide a glimps of the solution. Instead of defining a fixed height (which should be resolute and immutable) you'd want to define the minimum height, which IE6 doesn't support.

I hope you're still with me now, as we're going to have to combine the above errors and solutions to come up with something that will work in real CSS2 browsers as wel as IE6 ;) To do so we'll use a second error in IE6, which is an incorrect interpretation of !important. The result is this:

body {
  height: auto !important; /*For CSS2 browsers*/
  height: 100%; /*For IE6 and before*/
  min-height: 100%; /*For CSS2 browsers*/

In your code you're using inline styles and it should read:
<body style="margin:0px; padding:0px; height: auto !important; height:100%; min-height: 100%;">

Usually this is not what you'd need though, unless you have great need for placing something at the bottom of the page. Simply providing a background-color or image in the body and not setting the height of the body should be sufficient for having a background behind the entire content...

I also noticed you're using floated content in your page, this will cause havoc on non-IE browsers as it is. Since you've defined the width if the div containing the floats, IE will stretch the container to the size of the floated content (this is due to the setting of width causing hasLayout, a mystical IE property). For some more info on how to contain floats, I recommend the following article: http://www.positioniseverything.net/easyclearing.html

Hope this all helps :)

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.
Suggested Courses

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question