Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

I have a footer which is set to 100% width, but if i size the window smaller so a horizontal scrollbar appears, using the scrollbar shows whitespace to the right of the footer ... its not spanned 100% of the page, just the viewport.

<!doctype html>
<html lang="en" class="no-js">

<head>
    <title>test</title>
  <meta charset="utf-8">
</head>


<body> 

<div id="container" style="width:100%"> 
    <div id="body" style="width:1200px;"> 
        <!-- Body start --> 
            <h1>Main content area</h1>

            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
        <!-- Body end --> 
    </div> 

    <div id="footer" style="width:100%; background-color:green;"> 
        <!-- Footer start --> 
        <p><b>FOOTER.</b> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p> 
        <!-- Footer end --> 
    </div> 
</div>

</body> 
</html> 

Size the browser so horizontal scrollbar appears, and then scroll and you will see the footer background just stops.

Any ideas? Or is this site the wrong place for web site design/development .. I did have to read the site description but it still wasnt clear, nor was the meta-discussion? Apologies if its in the wrong place.

share|improve this question
add comment

2 Answers 2

up vote 2 down vote accepted

it's because the body tag has always 100% width of the window as default. In your case it means, that your #container tag has also 100% width of the body tag (the window), and so does also your #footer. The DIV #body is broader than the body, which will not grow automatically if an element is broader than itself. You can test it with Firebug.

Try to give min-width: 1200px; to the body tag, and you'll be fine.

Another solution would be: float:left; for the body tag.

Good luck,

Adam

share|improve this answer
    
Wonderful, thanks –  Dan Nov 5 '10 at 20:12
add comment

Add equal min-width to #body and #footer.

For example

#body, #footer {
    min-width: 980px;
}

worked for me.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.