css white-space:nowrap horizontal scroll bug

Question

I have the following markup

<style type="text/css">
    #outer
    {
        min-height: 100%;
        height: auto !important;
        height: 100%;
        width:100%;
        white-space:nowrap;
    }

    #inner
    {
        background-color:#CCCCCC;
        margin:0px 4px 0px 4px;
        padding:5px 5px 0px 5px;
        border:1px solid #9A9A9A;
        border-width:1px 1px 0px 1px;
    }

</style>

<div id="outer">
    <div id="inner">
    TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
    </div>
</div>

When the browser is wide enough, it looks like this

When the browse is resized narrow, it looks like this

I want the gray background of the narrow view to extend all the way to the right when I scroll. What about my markup and css is causing this unwanted effect (occurs in Chrome, FF3 and IE8)

Nicholle

+1 This even happens with Facebook! – Bartholomeus

Answer 1

An easy solution is to do this: on #outer, remove width: 100% and add float: left.

Live Demo

Treulich

What should I do if I don't want to float left? – Pily

@NathanGould: That's hard to answser without knowing why you don't want to use float: left. You can use display: inline-block instead, if that helps. – Treulich