CODEWITHSUNDEEP
htmlcssoverflowhtml-listscss-float
s2cuts
s2cuts

Reputation: 193

HTML, overflow:scroll, and float

I have a div that encapsulates many unordered lists (ul). I have each ul set to "float:left". And I also have the parent div that contains them set to "overflow-x:scroll". What's happening is the ul's are wrapping when they hit the edge of the page and not staying side by side to take advantage of the scrolling property of the parent div (the scroll bars are there). Why? How can I fix this?

Thanks for any help.

Upvotes: 11

Views: 15202

Answers (4)

Cameron Martin
Cameron Martin

Reputation: 6012

You can set your list items to display: inline-block, then use white-space: nowrap. Works in most modern browsers.

http://jsfiddle.net/gAGKh/22/

Upvotes: 6

seler
seler

Reputation: 9193

you need to insert those uls in another div, to which you'll give width=[width of ul]*[number of uls]
http://jsfiddle.net/seler/gAGKh/ or count total width of uls http://jsfiddle.net/seler/gAGKh/1/

Upvotes: 6

Shadow Wizard
Shadow Wizard

Reputation: 66389

You need to:

  1. Make the <li> also float.
  2. Set fixed width to each <ul>.
  3. Set fixed width to the containing <div>, enough to hold all the lists.

For example:

ul { width: 250px; }
li { margin-left: 5px; }
ul, li { float: left;  }
div { overflow-x: scroll; width: 750px; }

Test case.

Upvotes: 0

Tim
Tim

Reputation: 1039

Because you floated the ULs, they don't exist in the document flow anymore so they won't expand the parent div (hence the wrapping.)

Try setting an explicit width on the parent div that allows for all of them to exist side by side.

ALSO, if you aren't clearing the ULs in the parent div then you'll more than likely run into issues there too, vertical ones. Make sure you clear your floats :)

Upvotes: 5

Related Questions