: Footer not stretching 100% when horizontally scrolled 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

Posted in: #WebDevelopment #WebsiteDesign

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;">

<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>

</div>

<div id="footer" style="width:100%; background-color:green;">

<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>

</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.

10.02% popularity Vote Up Vote Down

: Prevent users from preventing my website ADs from being displayed? It may not be 100% of the users but even a localized amount of users that make use of ads blocking features will reduce your

@Tiffany637

Posted in: #Adblock #Advertising

2 Comments

: Web page element width i saw this on a website, and looked a bit through the css, but coudn't quite find what I am looking for. How to make a html element let's say a <div> with width

@Tiffany637

Posted in: #Css #Html

2 Comments

: What should I be responsible for as the first developer in a large scale web project? I am the first developer in a large scale web project, in the real estate sector. I am not an expert

@Tiffany637

Posted in: #WebDevelopment

2 Comments

: Robots.txt - just a guess about wild-card so if I disallow tempPage, does it mean tempPage_1, temp_Page_2, tempPage_x are also disallowed? I tried to google this up, but I don't know...

@Tiffany637

Posted in: #RobotsTxt

2 Comments

Login to post a comment!

2 Comments

Sorted by latest first Latest Oldest Best

@Megan663

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

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

worked for me.

10% popularity Vote Up Vote Down

@Correia994

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

10% popularity Vote Up Vote Down

Feed

: Footer not stretching 100% when horizontally scrolled 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

More posts by @Tiffany637

: Prevent users from preventing my website ADs from being displayed? It may not be 100% of the users but even a localized amount of users that make use of ads blocking features will reduce your

: Web page element width i saw this on a website, and looked a bit through the css, but coudn't quite find what I am looking for. How to make a html element let's say a <div> with width

: What should I be responsible for as the first developer in a large scale web project? I am the first developer in a large scale web project, in the real estate sector. I am not an expert

: Robots.txt - just a guess about wild-card so if I disallow tempPage, does it mean tempPage_1, temp_Page_2, tempPage_x are also disallowed? I tried to google this up, but I don't know...

Login to post a comment!

2 Comments

Back to top | Use Dark Theme