I have a page with the following structure:
div.wrapper
> div.content
> div.item
+ div.item
The wrapper has a width of 320px, whereas the two div.item
come out to around 600px. I need those two to be displayed inline (right now they are display: inline-block;
, and have the wrapper's contents scroll horizontally. When I set the div.content
width to auto
, it takes the width of the wrapper (320px). Setting the width to 200% obviously gets the horizontal scrolling to work, but how do I get div.content
to take on the width of its contents to allow for horizontal scrolling?
Note: The wrapper is set to a fixed width and height and has overflow-y: hidden
and overflow-x: scroll
set, because I do not want vertical scrolling– only horizontal.
JSFiddle with an example:
http://jsfiddle.net/kh5k7/
As you can see, the red divs will vertically stack. Changing the .content
width to 200% (or some value) will cause horizontal scrolling to occur properly. I want this done automatically though, because I have no clue how many elements are going to be in the .content
div before hand.
Best Answer
Use
white-space:nowrap;
on.content
http://jsfiddle.net/kh5k7/1/