CODEWITHSUNDEEP
htmlcss
XCS
XCS

Reputation: 28137

Force overflow horizontally

Can elements be forced to stay on a single line (with horizontal scrollbar) by using a single container div?

Why are the inner divs falling on multiple lines instead of being on the same line?

DEMO: http://jsfiddle.net/6PupD/61/

I want to achieve the same effect as this but without using an additional container.

Upvotes: 0

Views: 1245

Answers (2)

user3982863
user3982863

Reputation:

You can also use flexbox for this -

http://jsfiddle.net/clintioo/6PupD/92

#container {
    width: 315px;
    overflow-x: scroll;
    overflow-y: hidden; 
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row nowrap;
    -moz-flex-flow: row nowrap;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
}
.obj {
    min-width: 100px;
    width: 100px;
    height: 100px;
    background-color: #888;
    margin: 3px;
}

Upvotes: 0

Josh Crozier
Josh Crozier

Reputation: 240888

One option would be to add white-space: nowrap to the parent container element. Given that the children elements are inline-block, the property white-space: nowrap on the parent element will force them to stay inline without breaking to a new line. Just remove float: left and it will work.

Updated Example Here

#container {
    width: 300px;
    overflow-x: scroll;
    overflow-y:hidden;
    max-height: 150px;
    white-space: nowrap; /* Added */
}
.obj {
    width: 100px;
    height: 100px;
    background-color: #888;
    margin: 3px;
    display: inline-block; /* Removed float: left */
}

Upvotes: 5

Related Questions