How to arrange many
elements side by side with no wrap

Question

There are three div elements side by side in a container div, with smaller width than children total width. Here you can find the Fiddle of the case:

I want to make container div scroll horizontally in order to show other children.

How can I arrange children not to wrap inside container div? It scroll vertically now, I want it to scroll horizontally.

score 37 · Accepted Answer · answered Apr 22 '12 at 15:36

37

Change float: left to display: inline-block; and add white-space: nowrap to the container.

answered Apr 22 '12 at 15:36

2

And be careful not have whitespace in the markup :). [jsFiddle Demo](http://jsfiddle.net/SasDh/4/) of this solution. – kapa Apr 22 '12 at 15:46
Note: This solution will not work of the divs actually contain content: http://jsfiddle.net/Jnz7e/ – Jason Polites Sep 20 '13 at 21:41
2

@Jason Add `vertical-align:top` to the blocks. – Niet the Dark Absol Sep 20 '13 at 22:55
In case you have many div in some other place in body than try this without float:left. – Ashish Panery Jul 21 '14 at 13:43
@kapa does .pContiner div { display: inline-block; } affect all divs that are a child of pContiner or only the first level? – 1.21 gigawatts Nov 23 '14 at 04:36
1

@1.21gigawatts It affects all descendants. If you only need the first level (direct children), use the `>` selector. [Suggested reading: CSS selectors](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors#Information.3A_Selectors_based_on_relationships) – kapa Nov 23 '14 at 10:23
Previously mine was not working because I have both float: left and display: inline-block at the same time. Removing float: left is the solution for my case :) – Bruce Aug 02 '16 at 08:21

score 3 · Answer 2 · answered Apr 22 '12 at 15:40

3

You need a another div within the scrolling div that has a total width equal to all of the widths of it's children.

There was already an extra div there so I used that one

Bonus: To get rid of the vertical scroll bar use overflow-y: hidden. See: http://jsfiddle.net/joshdavenport/SasDh/3/

answered Apr 22 '12 at 15:40

Inner div.width is unknown, child divs are appending dynamically. – Reza Owliaei Apr 22 '12 at 15:52

score 1 · Answer 3 · answered Apr 27 '15 at 11:55

1

The <span> tag is used to group inline-elements in a document.
(source)

answered Apr 27 '15 at 11:55

Mike

3 Answers3