CODEWITHSUNDEEP
css
Don P
Don P

Reputation: 63577

Create a single row of divs, and add a scroll to their container div

How can I make a set of squares inside of a div line up in a row, and trigger a horizontal scroll when the squares exceed the div width?

This jsfiddle shows gray squares wrapping incorrectly given a narrow width. The gray squares should always be in 1 row, and the container div should have a horizontal scroll.

http://jsfiddle.net/anqKb/

Things I've tried:

A variety of position: absolute and overflow: scroll attributes. No combination seems to get the desired effect of a scrollable container div.

Upvotes: 0

Views: 786

Answers (6)

super
super

Reputation: 2328

Check this Demo. Change your container class as follows.

.container {
    width: 100%;
    height: 120px;
    background: rgb(100, 100, 100);
    white-space: nowrap;
    overflow-y:hidden;
    overflow-x:scroll;
}

Upvotes: 0

Rajinder Deol
Rajinder Deol

Reputation: 111

Add white-space: nowrap along with that add a width to your container with scroll x visible and y hidden

<div class="container">
<div style="width: auto; white-space: nowrap">
    <div class="thumbnail">
    </div>
    <div class="thumbnail">
    </div>
    <div class="thumbnail">
    </div>
    <div class="thumbnail">
    </div>
    <div class="thumbnail">
    </div>
    <div class="thumbnail">
    </div>
    <div class="thumbnail">
    </div>
    <div class="thumbnail">
    </div>
</div>


.container {
width: 500px;
height: 120px;
background: rgb(100, 100, 100);
overflow-x: scroll;
overflow-y: hidden;

}

Check : http://jsfiddle.net/anqKb/19/

Upvotes: 0

Julian
Julian

Reputation: 1471

You could use another that contains the squares and set a fixed width.

.setWidth {
    width: 740px;
}

www.jsfiddle.net/anqKb/10/

Upvotes: 0

philip
philip

Reputation: 206

See http://jsfiddle.net/anqKb/17/ for solution. You needed white-space: nowrap; so that each of your boxes don't wrap and continue down the page.

So I added that and overflow:scroll; to .container and it works.

Upvotes: 0

Klaster_1 Нет войне
Klaster_1 Нет войне

Reputation: 12146

To make inline-blocks always stay in one row, use white-space:nowrap on container. Optional overflow (i.e. when content width exceeds parent width) is achieved with overflow:auto.

Here's an updated fiddle.

Upvotes: 2

Shamnad P S
Shamnad P S

Reputation: 1173

Update the css to the following

.container {
    width: 100%;
    height: 100px;
    background: rgb(100, 100, 100);
    overflow:auto;
}

Hope this helps

Upvotes: 0

Related Questions