Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Add elements in a single row and scroll along x if required

Add elements in a single row and scroll along x if required

Problem

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

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;
}
​
Problem courtesy of: xbonez

Solution

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;
}
Solution courtesy of: Zoltan Toth

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Add elements in a single row and scroll along x if required

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×