CSS Layout in Firefox - Background Height

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 />
Who is Participating?
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 :)
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.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.