ul based html menu with css spilling into multiple lines

Question

So essentially I have a horizontal menu using ul and li elements styled with CSS which has a fixed height attribute for the ul but since the number of li elements are too many they are spilling over into multiple lines ...since the height of the ul is fixed, the li elements appear on the next line just fine but they are outside of the 'block' of the ul...so any further html content that appears starts showing inline with the li elments on the 2nd line?

I hope I have been able to describe the problem. I wish this was a publicly accessible site, for the CSS gurus to help with using firebug or web inspector.

The problem is clear, but what kind of a solution are you looking for? — jeroen
– jeroen, Commented Mar 1, 2011 at 19:21
Ideally, a solution where menu ul block element encloses all the li elements (not only on the 1st row), so even if the menu spills over into 2-3 rows (say the user has a small screen width) , the main content is after this block, not inline with the li elements on the 2nd line... — eskhool
– eskhool, Commented Mar 2, 2011 at 4:40

Diodeus - James MacFarlane · Accepted Answer · 2011-03-01 19:27:29Z

2

use min-height on your UL, not height
use float:left on your LIs
use display:block on your A tags and put all other styling on the A tags. (DO NO STYLE THE LI TAGS OTHER THAN FLOAT:LEFT)

answered Mar 1, 2011 at 19:27

Diodeus - James MacFarlane

115k33 gold badges164 silver badges180 bronze badges

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

2 Comments

David Thomas Over a year ago

+1 for that last point (and one that's caught me out more times than I care to remember...) :)

eskhool Over a year ago

Did that Diodeus, but no luck..here is the computed styles as shown by web inspector (safari): UL: pastedump.com/paste/1271 LI: pastedump.com/paste/1272

reuven · Accepted Answer · 2011-03-01 19:41:44Z

0

you can expand the width of the container tag holding the ul, you do not have enough width for all the list elements
if you can not enlarge the container try to cut down the width of the li's, using less padding and margin in between them.
you can all so use a min-width property to bee sure that they will have enough space

answered Mar 1, 2011 at 19:41

reuven

234 bronze badges

Collectives™ on Stack Overflow

ul based html menu with css spilling into multiple lines

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related