HTML, overflow:scroll, and float

Question

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.

seler · Accepted Answer · 2011-05-08 08:40:54Z

6

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/

edited May 8, 2011 at 8:40

answered May 8, 2011 at 7:57

seler

9,2334 gold badges43 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

s2cuts Over a year ago

Creating an inner div helps alot. Instead of using JS to calculate the appropriate width, I found that setting the static width of the new inner div to a sufficiently large width to account for the most extreme case does no harm to the layout. Thanks seler.

seler Over a year ago

@s2cuts that may only work if you have constant ul width and constant ul number.

user1226868 Over a year ago

Nasty javascript fix, the answer described by ddlshack is a cleaner solution.

Cameron Martin · Accepted Answer · 2012-04-21 17:02:00Z

6

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/

answered Apr 21, 2012 at 17:02

Cameron Martin

6,0102 gold badges45 silver badges55 bronze badges

Comments

Tim · Accepted Answer · 2011-05-08 07:09:11Z

5

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 :)

answered May 8, 2011 at 7:09

Tim

1,0397 silver badges21 bronze badges

2 Comments

s2cuts Over a year ago

The explanation was part of my query, thank you. Also can you explain what you mean by "Make sure you clear your floats"?

Tim Over a year ago

@s2cuts Make sure you use something like clearfix to expand your parent containers to the height of the content. Otherwise, you'll run into issues with vertical height similar to the issues you were having with horizontal width. Just a heads up.

user447356 · Accepted Answer · 2011-05-08 07:18:04Z

0

You need to:

Make the <li> also float.
Set fixed width to each <ul>.
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.

answered May 8, 2011 at 7:18

user447356

Collectives™ on Stack Overflow

HTML, overflow:scroll, and float

4 Answers 4

3 Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related