Question

I’m trying to add multiple elements in a single row within a div. However, if it runs out of space, it spills over to the second row. How can I force them in a single row? I want a scroll bar along x-axis to appear if necessary, but they should not spill into a second row.

The aim is to combine this with a touchscreen device like the iPad, so I get a horizontal scroll effect for the elements.

Here’s a fiddle:
http://jsfiddle.net/PW5Q5/8/

The HTML

<div id="wrapper">
    <div id="element"></div>
    <div id="element"></div>
    <div id="element"></div>
    <div id="element"></div>
</div>

The CSS

div#wrapper {
    height: 150px;
    width: 500px;
    border: 1px red solid;
    overflow-x: auto;
}
div#element {
    height: 100px;
    margin-top: 25px;
    width: 200px;
    border: 1px blue solid;
    display: inline-block;
    margin-left: 30px;
}
​

Answer 1

Use white-space: nowrap – http://jsfiddle.net/PW5Q5/14/

div#wrapper {
    height: 150px;
    width: auto;
    border: 1px red solid;
    overflow-x: auto;
    white-space:nowrap;
}