CODEWITHSUNDEEP
csshtmlscrolloverflow
Alex
Alex

Reputation: 1152

Overflow:auto and DIV Problem

Here is the deal. I have a container DIV with a width of 100%. And inside of that DIV I have tons of blank DIV's floated to the left with display:block on them. (for test purposes)

I have overflow-x:auto on the container.

Once the last div reaches the end of the container element it drops to the next line instead of staying in line with the other DIV's and initiating a scroll bar on the container.

How do I keep the DIV's from dropping to the next line and forcing them to invoke scroll behavior on the container?

Let me know thanks so much!

Here is a pic to help: alt text

Upvotes: 1

Views: 503

Answers (2)

michael
michael

Reputation: 4483

<html>
    <head>
        <style type="text/css">
            #container {
                white-space:nowrap;
            }

            .child {
                background-color:#dddddd;
                display:inline-block;
                height:100px;
                width:100px;

                /* Trick FF2 into using inline-block */
                display:-moz-inline-stack;

                /* Trick IE6 into using inline-block */
                *display: inline;
                zoom:1;
            }
        </style>
    </head>
    <body>

        <div id="container">

            <div class="child">.</div>
            <div class="child">.</div>
            <div class="child">.</div>
            <div class="child">.</div>
            <div class="child">.</div>
            <div class="child">.</div>
            <div class="child">.</div>
            <div class="child">.</div>
            <div class="child">.</div>
            <div class="child">.</div>

        </div>

    </body>
</html>

Upvotes: 3

Spudley
Spudley

Reputation: 168655

Have you tried white-space:nowrap; ?

You may also find you need to switch to using display:inline-block; rather than float:left;.

Upvotes: 1

Related Questions