Question

My Problem

When I minimize the browser window the category menu does not minimize the way I would like it to. I would like the li elements to drop one by one below the other other li elements as the window is minimized. The problem is that the whole ul element is dropped below the p element.

A live example of the menu is located here.
The live example’s code is located here.

Here is the category menu in a full size window. Notice the Main Categories and Sub Categories gray p DIVS are not at max-height even though I have set their height to 100%. The orange and yellow DIVs are called #main and #sub. The purple DIV is the ul element and the lightly colored blocks with text in them are the li elements.
alt text http://lh3.ggpht.com/_rNlSpSUBkYo/TF08FsFrA4I/AAAAAAAAAFw/hZm7flu032A/cat-full-size.jpg

Here it is in a 861px wide window. No change…
alt text http://lh3.ggpht.com/_rNlSpSUBkYo/TF08GYxMMhI/AAAAAAAAAF0/nFpr-pV3eF4/cat-861px.jpg

Here it is in a 777px window. Here you can see the entire purple ul element in the yellow #sub DIV just drops below the gray Sub Categories p element
alt text http://lh5.ggpht.com/_rNlSpSUBkYo/TF08H2tAA8I/AAAAAAAAAF4/VH5Wo46HCgg/cat-777px.jpg

Here it is in a 731px window. Here we can see the purple ul element in the orange #main DIV also drops below the Main Categories p element.
alt text http://lh3.ggpht.com/_rNlSpSUBkYo/TF08IUMAXRI/AAAAAAAAAF8/pqmPpOgVv_Y/cat-731px.jpg

Here it is in a 721px window. Finally we can see that the li elements begin to drop down a level as the yellow #sub DIV minimzes even more.

The Solution I Seek

Now I would like to show you the results I am after with mock ups I constructed in Photoshop.

Here we can see the gray p element containing the text Main Categories and Sub Categories are now at the full height of their #main and #sub containing DIVs. Also and more importantly, we can see that the entire ul element no longer drops below the gray p element.
alt text http://lh3.ggpht.com/_rNlSpSUBkYo/TF08LBmFWnI/AAAAAAAAAGM/WLQx_wVsSQw/cat-correct-777px.jpg

And finally we can see #main DIVs purple ul element minimize propely just as the #sub DIVs purple ul element did in the screen shot above.
alt text http://lh6.ggpht.com/_rNlSpSUBkYo/TF08L0F5OoI/AAAAAAAAAGQ/isdjLp6m_rs/cat-correct-731px.jpg

Full size images of the images here can be seen at my Picassa album

Any ideas on how to fix this?

Answer 1

What I had to do was to add display: table; to the ul element and get rid of float:left. Now it minimizes as I would like across Firefox, Chrome, IE, Opera and Safa Here is the link to the new updated code