Divs next to each other, with size, no linebreak

Question

I want many little div-s next to each other, with no linebreak:

<div style="overflow: scroll;">

<div style="float: left; width: 40px;"></div>
<div style="float: left; width: 40px;"></div>
<div style="float: left; width: 40px;"></div>

</div>

the problem is, the width works, but it goes to new line if overflows, so no scroll horizontally.

I think what you are looking for has been answered here http://stackoverflow.com/questions/1321851/how-to-get-horizontal-scrolling-with-the-div-element and here http://stackoverflow.com/questions/1015809/how-to-get-floating-divs-inside-fixed-width-div-to-continue-horizontally — U.P, Jul 17 '12 at 08:58

score 8 · Accepted Answer · answered Jul 17 '12 at 09:01

8

You can achieve this with white-space & display:inline-block;. Write like this:

.parent{
 white-space:nowrap;
overflow:scroll;
}
.parent > div{
 display:inline-block;
 white-space:normal;
}

Check this http://jsfiddle.net/EUtLh/

answered Jul 17 '12 at 09:01

sandeep

91,313
23
137
155

That is the best way to do it. I *would* put a min-width on `.parent`. Another point to keep in mind is to avoid whitespace between the divs in the `.parent`, or else you may end up with 1 `ch`of vertical space between the single divs. – ramsesoriginal Jul 17 '12 at 09:18
@UmairP it's not work in IE6 but for IE7 there is an hack http://stackoverflow.com/questions/6544852/ie7-problem-with-display-inline-block – sandeep Jul 17 '12 at 12:56

score 1 · Answer 2 · answered Jul 17 '12 at 08:56

1

The width of your general container in which these divs will be placed needs to be set to "width:100%", so that i can adapt to the growing size.

answered Jul 17 '12 at 08:56

but it then ignores the "width" value – John Smith Jul 17 '12 at 09:02

Riz · Answer 3 · 2012-07-17T09:12:24.767

1

Here is the script for you.

Not sure if that's exactly what you want.

http://jsbin.com/anoran/edit#javascript,html

UPDATED:

http://jsbin.com/anoran/2/edit

edited Jul 17 '12 at 09:12

answered Jul 17 '12 at 08:58

Riz

9,703
8
38
54

this also puts to new line if there are too much inner div – John Smith Jul 17 '12 at 09:03
1

yes, you need to adjust width of outer div, if you want all divs in single row. – Riz Jul 17 '12 at 09:05

score 1 · Answer 4 · answered Jul 17 '12 at 09:10

<div style="overflow-x: scroll; width:100%|400px">
    <div style="width:10000px">


<div style="float: left; width: 40px;"></div>
<div style="float: left; width: 40px;"></div>
<div style="float: left; width: 40px;"></div>


    </div>
</div>

worked in chrome!

Divs next to each other, with size, no linebreak

4 Answers4

Linked