How to arrange many <div> elements side by side with no wrap

html css css-float
Reza Owliaei picture Reza Owliaei · Apr 22, 2012 · Viewed 50.2k times · Source

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.

Answer

Niet the Dark Absol picture Niet the Dark Absol · Apr 22, 2012

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

Related questions

How to align 3 divs (left/center/right) inside another div?

I want to have 3 divs aligned inside a container div, something like this: [[LEFT] [CENTER] [RIGHT]] Container div is 100% wide (no set width), and center div should remain in center after resizing the container. So I set: #container{width:100%;} #left{…

Read More
How to align two elements on the same line without changing HTML

I have two elements on the same line floated left and floated right. <style type="text/css"> #element1 {float:left;} #element2 {float:right;} </style> <div id="element1"> element 1 markup </div> <div …

Read More
Split Div Into 2 Columns Using CSS

I have been attempting to split a div into two columns using CSS, but I have not managed to get it working yet. My basic structure is as follows: <div id="content"> <div id="left"> <…

Read More