CSS overflow-y property - scrolling divs

Question

I have this set up:

<div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
</div>

the inner divs has this CSS:

float: left; 
margin-right: 40px;
width: 100px;

the outer divs have this:

overflow-x: scroll;
height: 275px;
width: 300px;

The divs contain a list of input checkboxes. I want them to keep sliding right and then a horizontal scrollbar show. instead, the div's wrap. So now they are vertical and I am scrolling vertically instead. How can I make them keep going to the right?

Nico O · Accepted Answer · 2014-02-15 00:21:24Z

1

Make the items Inside the overflow Container Display:inline-block and add white-space:nowrap; to the scrolling Container.

answered Feb 15, 2014 at 0:21

Nico O

14.2k10 gold badges58 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nico O Over a year ago

Did you remove the floatings?

Tom Faltesek · Accepted Answer · 2014-02-15 00:20:31Z

1

Try floating the inner divs to the left too, or try setting their display to inline-block.

Option A:

float: left;
overflow-x: scroll;
height: 275px;
width: 300px;

Option B:

display: inline-block;
overflow-x: scroll;
height: 275px;
width: 300px;

answered Feb 15, 2014 at 0:20

Tom Faltesek

2,8182 gold badges21 silver badges31 bronze badges

Collectives™ on Stack Overflow

CSS overflow-y property - scrolling divs

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related