Footer not stretching 100% when horizontally scrolled
Posted
by
Dan
on Pro Webmasters
See other posts from Pro Webmasters
or by Dan
Published on 2010-11-05T08:11:33Z
Indexed on
2011/11/27
10:04 UTC
Read the original article
Hit count: 600
web-development
|website-design
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.
© Pro Webmasters or respective owner
