0

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.

2

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

| improve this answer | |
0

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

For example

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

worked for me.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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