When I resize my footer does not fill the rest of the page when the window is resized. For instance if i have the window sized at 400px then the footer will not go any further even though it is trained to.

.wrapper {
    height: 218px; 
    background-image:url(images/foot.png);
    **background-repeat:repeat-x;**
    padding-left: 60px;
    -webkit-box-shadow: 0px -8px 60px #000;
    z-index:1102;
    clear: both;
    }

.footer {
    height: 218px; 
    **min-width: 950px;** /*This is the current solution. I'm looking for something a little more less extreme.*/
    padding-top: 30px;
    overflow:hidden;    
    z-index: 2;
    **left: 0;
    right: 0;**
    position:absolute;
}
  • Can you provide us the HTML to your CSS (which has many errors). Have you already tried to set it to "width: 100%"? Is you maybe child of another tag which has a fixed width? Without HTML we couldn't really help you out. Kau-Boy almost 9 years ago
  • We really do need the HTML to see what you're talking about. "width:100%" should do it, given nothing else. Alex Ford almost 9 years ago

1 answer

0
points

If you're using Internet Explorer version 7.0 or lower, min-width is not a recognized CSS property.

Also, you need to clean up your CSS. Try this:

.wrapper {
    height: 218px; 
    background-image:url(images/foot.png);
    background-repeat:repeat-x;
    padding-left: 60px;
    -webkit-box-shadow: 0px -8px 60px #000;
    z-index:1102;
    clear: both;
    }

.footer {
    height: 218px; 
    width:100%;
    min-width: 950px; /*Works in all but IE 7.0 or lower */
    padding-top: 30px;
    z-index: 2;
}

Your left: 0; and right: 0; properties were probably confusing things too, so I removed those, along with overflow:hidden; and position:absolute;, which may have been useful, but we need more explanation on how your footer is supposed to work to be sure.

We do need to see your HTML to get a better idea of what's going on, but there's a start.

Answered over 8 years ago by Josh Mock