CODEWITHSUNDEEP
cssscrollcss-floatoverflow
Senseful
Senseful

Reputation: 91941

Prevent floating elements from wrapping around (show scroll bar instead)

How do I make a div tag's elements not wrap around and instead extend beyond the available space on the page?

For example, I have:

<div class="container">
<div class="row">
    <div class="child">1</div>
    <div class="child">2</div>
    ...
    <div class="child">19</div>
    <div class="child">20</div>
</div>
<div class="row">
    <div class="child">1</div>
    <div class="child">2</div>
    ...
    <div class="child">19</div>
    <div class="child">20</div>
</div>
</div>​

CSS: 

.container{
    overflow: scroll;
    width: 100%;
}
.row {
    clear: both;
}

Actual Output:

enter image description here

Desired Output:

enter image description here

http://jsfiddle.net/kcW6w/

I want the container element to be 100% wide, but have a scroll bar so that each row doesn't wrap around.

I found that if I set a large, arbitrary width to the .row element, it works properly. Is there another way to do this besides setting an arbitrary width? I prefer not to use a hard-coded width, since the width will change dynamically.

.row {
    clear: both;
    width: 2000px;
}

http://jsfiddle.net/kcW6w/1/

I also notice there's some inconsistency with the scroll bar on Safari, possibly because of the arbitrary value I set.

Scroll bar inconsistency in Chrome on Mac OS X (scrolled all the way to the right):

enter image description here

Safari doesn't even show the scroll bars.

Upvotes: 3

Views: 4713

Answers (1)

Zoltan Toth
Zoltan Toth

Reputation: 47685

You can try this - DEMO

CSS

.container {
    overflow: scroll;
}

.row {
    white-space: nowrap;
    font-size: 0;
}

.child {
    font-size: 16px;
    width: 60px;
    height: 60px;
    border: 1px solid black;
    background-color: #ccc;
    display: inline-block;
}

Upvotes: 1

Related Questions