Home/ Questions/Q 682473
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T01:35:59+00:00

I usually have my structure laid out something like this: <div id=all> <div id=page>

  • 0

I usually have my structure laid out something like this:

<div id="all">
  <div id="page">
    <div id="header"></div>
    <div id="content"></div>
    <div id="footer"></div>
  </div>
</div>

Where the body will hold a background pattern, “all” will hold a dropshadow for the page going up and down, and “page” may often have a repeating-y background as well.

I have tried variations on using the css height/min-height properties:

html, body {
    height:100%;
    ...
}
#all {
    height:100%; 
    min-height:100%; 
}
#page {
    height:100%; 
    min-height:100%;
    height:auto !important;
}

It seems like if I remove height:auto from “all” then it seems like it works UNTIL you scroll, then after the scroll the background for all dissappears

example

However if I keep the height:auto there then I get the problem of the background for page not working

example

Hopefully someone knows a fix?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Well, here’s what I ended up with for the CSS:

    html, body {
    height:100%; /* IE6: treaded as min-height*/
    margin: 0;
    padding: 0;
}
body {
    margin: 0;
    padding: 0;
    color: #494949;
    text-align: center;
    background-color: #3f91a7;
    background-image: url(images/bg_body.jpg);
    background-repeat: repeat-x;
    background-position: center top;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}
#all {
    margin: 0px;
    padding: 0px;
    height:100%; /* IE6: treaded as min-height*/
    min-height:100%; /* real browsers */
    height:auto !important;
    background-image: url(images/bg_all.png);
    background-repeat: repeat-y;
    background-position: center top;
    overflow: hidden;
}
#page {
    width: 993px;
    padding: 0 0 10000px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: -10000px;
    margin-left: auto;
    text-align: left;
    background-color: #FFF;
    background-image: url(images/bg_page.jpg);
    background-position: center top;
    background-repeat: repeat-y;
    height:100%; /* IE6: treaded as min-height*/
    min-height:100%; /* real browsers */
    height:auto !important;
}
#header, #footer {
    text-align: center;
    font-size: 16px;
    padding: 20px;
}
#content {
    padding: 25px;
}

    I haven’t had a chance to test it in anything other than Firefox, but, hoipefully it will give you a good start.

    • 0