CODEWITHSUNDEEP
htmlcssscroll
curious1
curious1

Reputation: 14717

Background color does not show up when scrolling to the right

I have the following simple HTML and CSS:

<html>
<head>
    <title></title>
</head>
<body>
    <div style="width: 970px;">Text area</div>
    <div style="height: 20px; background-color:gray; width: 100%; "></div>
</body>
</html>

I load this page in a browser. If the width of the browser is 400px (just an example), then I see a horizontal scroll bar in the browser screen bottom. If I move the scroll bar to the right, I can see that the background of the second div does not extend to the right.

I hope that the background color of the second div can extend from browser's left edge to the right edge (no matter what the width of the browser is).

How can I fix this?

Thanks!

Upvotes: 4

Views: 3231

Answers (6)

DRD
DRD

Reputation: 5813

Whenever an element's explicitly set width is larger than the width of the body, the element overflows the body's boundaries. In other words, the browser will not adjust the width of the body, thereby restructuring an entire page layout, because one element spills over.

One solution is to make the div that follows the first div overflow as well.

Here's HTML:

<body>
    <div>Text area</div>
    <div></div>
</body>

CSS:

body > div:first-of-type {
    width: 970px;
    outline: 1px solid red;
}

body > div:last-of-type {
    width: 100%;
    height: 20px;
    background-color: gray;
}

@media screen and (max-width: 970px) {
    body > div:nth-of-type(2) {
        width: 970px;    
    }
}

And, here's a fiddle: http://jsfiddle.net/8mK7f/.

Upvotes: 0

user2591925
user2591925

Reputation: 34

Since you are hard coding the widths why not just set the width of the gray bar to the same as the div >Text Area< ? e.g

<div style="width: 970px;">Text area</div>
<div style="height: 20px; background-color:gray; width: 970px; "></div>

Upvotes: -1

Dave Zych
Dave Zych

Reputation: 21887

This is because the body tag's width is the width of your browser window, and the 100% width on the second div is taking the width of the parent, which is the body tag. In your example this means the second div will only ever be 400px (the width of the browser window).

You'll have to set the width of the body tag to also be 970px in order for this to work. Setting body to 100% width won't solve it, because that will take 100% of it's parent width which is the html tag and will still be the width of the browser window.

<body style="width: 970px;">
    <div style="width: 970px;">Text area</div>
    <div style="height: 20px; background-color:gray; width: 100%; "></div>
</body>

EDIT: An alternative is to set the body to have display: inline-block which will force it to expand to the width of it's children:

<body style="display:inline-block">
    <div style="width: 970px;">Text area</div>
    <div style="height: 20px; background-color:gray; width: 100%; "></div>
</body>

Upvotes: 2

Christopher Harris
Christopher Harris

Reputation: 112

I would suggest making sure the browser default CSS isn't interfering by using a CSS reset. http://meyerweb.com/eric/tools/css/reset/

Upvotes: 1

D.Evangelista
D.Evangelista

Reputation: 6543

You can solve like this:

<div style="width: 970px">
  <div>Text area</div>
  <div style="height: 20px; background-color:gray; width: 100%;"></div>
</div>

Upvotes: 1

BCza
BCza

Reputation: 340

When you use percentages in CSS, it only extends to the % of the parent element. In this example, make sure that the body element is 100% width as well.

Best of luck :)

Upvotes: 0

Related Questions