CSS backgrounds and horizontal scrollbars

StackOverflow https://stackoverflow.com/questions/22673844

Question

Can anyone enlighten me to why the following occurs with this test case?

<!DOCTYPE html>
<html>
    <head>
        <style>
        body {
            background-color: #ffffff;
            margin: 0; 
            padding: 0;
        }
        .section {
            background-color: #000000;
            color: #ffffff;
        }

        .wrap {
            width: 960px;
            margin: 0 auto;
        }
        </style>
    </head>
    <body>

        <div class="section">
            <div class="wrap">Some content here</div>
        </div>

    </body>
</html>

When the window is big enough to accommodate 960px, everything works as expected.

When the window is resized to smaller than 960px a horizontal scrollbar appears (As expected). However, when scrolling horizontally it appears that the .section div has not been stretched across the document and appears only to be the width of the window, therefore revealing the body's white background.

I would normally expect the black, .section div to stretch across the document since it's display: block by default.

Does anyone know why this is happening and more importantly, how to get the result I expect?

Cheers

Was it helpful?

Solution

It's because the witdth of your section is only as big as what's in it. In this case this means your wrapper which is set to 960px. Setting the section in percentage only works as percentage of the available screen, so width:100% wouldn't solve this. You should set your section width to a specific number and that would fix the issue.

Edit: Use min-width instead of width and it works even better for when you go bigger than you min-width.

OTHER TIPS

section is sizing to it's contents, try setting width:100% on .section

In addition, you may want to add this to .wrap

margin-left:auto; margin-right:auto;

that will center the wrap div

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top