Background color does not show up when scrolling to the right


Tags: html,css,scroll

Problem :

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!



Solution :

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


    CSS Howto..

    How to make divs re-arrange when another div is positioned between existing?

    How to create an overlay to be used under a pop up

    CSS Horizontal Menu has wrong x-position, how to put directly under parent menu?

    How can I get jQuery to toggle a class with fadeToggle?

    How to push a div from the top in percentage with css?

    How to make a dynamic-height DIV [duplicate]

    How to do a resizable link a:hover in CSS

    how to disable drupal7 system css files?

    jQuery, CSS: Two divs, how can I make them “show”next to each other?

    How can I force Visual Studio to follow a custom CSS template when I edit my css files?

    How to apply an opacity without affecting a child element with html/css?

    How to get the last Element of CSS?

    How do I select this Div with CSS

    How to use a lower resolution image for mobile?

    How does HTML/CSS determine the size?

    How can I add my custom style for my bootstrap navbar?

    how can i center a nested div

    How to make a HTML NavBar [closed]

    How to implement :root { font-size: calc(100vw / 40); } to scale font-size(s)

    How to remove the effect of all the parent containers on any child control

    How to have your own style.css and bootstrap at the same time?

    How to make table borders invisible with CSS

    joomla: how is the CSS generated?

    How make my CSS responsive using Bootstrap 3.1

    How do I get this menu to stay top right of the image on hover? - CSS, jQuery

    How to prevent page margin from expanding in HTML/CSS code when window is resized

    How do you stop a single-page site from automatically scrolling when resizing the browser?

    How do I specify IE 11 specific css file?

    How to make a caret in a link change color when the LINK is hovered over?

    How to build a simple CSS layout that expands to the viewport?