CSS Layout in Firefox - Background Height

Posted on 2007-09-30
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

    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

    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:

    Hope this all helps :)

    Featured Post

    Highfive + Dolby Voice = No More Audio Complaints!

    Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

    Join & Write a Comment

    So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
    This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
    HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
    Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…

    754 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

    Need Help in Real-Time?

    Connect with top rated Experts

    26 Experts available now in Live!

    Get 1:1 Help Now