I guess this is a common question but haven't found any good answer about it, and questions around here are not exactly my case. Also, this is my first question so please don't be too harsh on me. lol

I have a standard CSS menu, made with UL and LI tags. I need them to get to cover the whole page, horizontally (not my real case, but I'll take this to simplify the situation). However, the items are created dynamically and so I'm not able to hardcode any with to LI items, nor margins.

I've seen solutions using JavaScript to set those values but I would really love to avoid them.

You need them to "cover the whole page"? Do you mean horizontally 100% page width, divided equally? Would you be able to have standard buttons across each page, with dynamically-created sub-menus? Also: which version of IE is giving the problem? I assume it's the display: table /* or table-cell */ that's causing problems. Despite my inner-distaste, you may be as well off using real html tables, if you're rendering that way...I'm sorry =(
–
David ThomasJul 30 '09 at 1:12

Hi. It is not necessary to cover the whole page, but I made it that way to simplify the situation. And yes, they should be spaced equally. I did not understand very well the button question. Are you referring to the standard <button> element? I tried it with IE 6, IE 7 and haven't tried with IE 8 yet. Also, my first approach was using tables as I couldn't get desired results on other way... but this comes up from a template generator so I'm bound to lists. Thanks anyway. =)
–
AlphaJul 30 '09 at 13:40

thank you jesse, you made my day by pointing out this property to me
–
cardflopperOct 17 '09 at 0:07

Alpha, this should be flagged as the CORRECT answer for posted question. This is the most accurate and comprehensive way to have inline block elements properly on most browsers including IE6+
–
Austin S.May 14 '12 at 12:36

could you please specify which element should have this style? the li? the ul? the div? thank you.
–
chodo bagginsOct 14 '14 at 20:33

If you want to let the element get the whole available space, there is no need to define a priori the width of the menu elements (of course, it will help in equally sizing the li elements). You can solve this problem by working on the display property.

I don't quite understand the 1% being required; can you elaborate on it?
–
PetrogadSep 4 '12 at 17:53

3

It is a little trick (and also a common practice)! I know it seems to make no sense, but it should set the width of something to be the minimum necessary to fit the content. In fact, even if you set the width to 1%, if the content is 200px wide, it will be shown at minimium 200px. Someone also add the "white-space:nowrap" property, but it is necessary depending on the case. Regards.
–
JeanValjeanSep 5 '12 at 7:45

Awesome. After reading fifty posts saying to to kluge it with a pseudo-element, I still knew there had to be a proper way.
–
Adam MacklerMar 29 '14 at 23:48

If your menu items are being dynamically generated (so you don't know how many there will be prior) then you can add a style="width:xx" attribute to the lis (or in <style> at the top... or where ever you please, really). Where xx should either by width_of_parent_div_in_px/number_of_elements+'px', or 100/number_of_elements+'%'. The lis should also be block-level elements, and floated left.

Thanks, it seems like a clean solution, however, the code that generates items is not mine and I would not be able to set the style without using javascript. Sorry for not mentioning that before.
–
AlphaJul 30 '09 at 13:45

Stumbbled in here 4 years later. Since you are using Javascript and these days JQuery you could do: var listId = $('#listId'); var listItems = listId.children('li'); var listItemCount = listItems.length; listItems.css('width',listId.width/listItemCount + 'px');
–
Richard ChristensenFeb 13 '14 at 21:21

#menu ul li {
float: left;
clear: none;
display: inline;
padding: 10px;
height: 25px; //how tall you want them to be
width: 18%; //you will need to set the width so that all the li's can fit on the same line.
}

The width: 18% may be about right if you have 5 elements across, accounting for border and padding. But it will vary due to how many elements you have, how much padding, etc.

You know, I'm not convinced that what he said is what he meant, regarding the 'fill the whole page' (height: 100%). I assume -and I could definitely be wrong- that he meant only horizontally. Filling the whole page with navigation just sounds wrong =/
–
David ThomasJul 30 '09 at 1:17

the height: 100% is referring to the li tag and that the ul. Presumably he has the ul already set to a specific height, or has another wrapping element with a specific height. The height: 100% would just ensure that it is taking up all available space.
–
Ballsacian1Jul 30 '09 at 1:20

That's right, when referring to "filling the whole page" I meant horizontally, sorry for not making it clear before. Already edited the question. Thanks!
–
AlphaJul 30 '09 at 13:47

I recommend setting the padding on the link inside the li (if it's a menu) since it increases the clickable area.
–
Jonas StensvedAug 16 '11 at 6:46