CODEWITHSUNDEEP
css
Saurabh Khirwal
Saurabh Khirwal

Reputation: 341

making elements stack left not below

i am not able to explain it correctly....but here it is....i want DIVs to float left in the container such that...when their total width increases the width of the container...they will make a horizontal scroll-bar but will not go below one another in any case...
like if the container's width is 500px;
and it contains 5 children DIVs each of 200px width
now when i float then left...they stack like 2 in a row and 2 in the next row....eg:
div1 div2
div3 div4
div5
i want them something like this :
div1 div2 div3 div4 div5
with scroll-bar...

Upvotes: 2

Views: 71

Answers (1)

Faust
Faust

Reputation: 15404

I would recommend, instead of floating them, set display:inline-block;, then apply white-space:nowrap to the container element.

And be sure the container has no fixed width. (min-width is OK though).

update 1) fixed error (thanks to JOPLOmacedo) 2) working example at: http://jsfiddle.net/t9Vnf/

Upvotes: 2

Related Questions