HTML List element : Sharing the parent width into equal parts

I think this is what you're asking for. It required jQuery though.

http://jsfiddle.net/sKPLQ/3/

CSS:

ul { width: 800px; } li { display: inline-block; float:left; } 

JS:

var evenWidth = $(".list").width()/$(".list li").size(); $(".list li").css("width", evenWidth); 

HTML:

<ul class="list"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> 

Here is a minimalistic design. It will produce responsive equal distance cells

<style> div { border:1px solid red; width:400px; height:400px; } ul { width:100%; height:50px; list-style: none; margin:0; padding:0; text-align: center; } li { background-color:green; color:White; width:1%; position:relative; display:table-cell; border:solid 1px white; } </style> <div> <ul> <li>CELL 1</li> <li>CELL 2</li> <li>CELL 3</li> <li>CELL 4</li> </ul> </div> 

The magic is width:1%; position:relative; display:table-cell;

As Renesis pointed out, I think table cells is the only option, unless you're scripting it. Although you can use table-cell in CSS.

#menu {display: table-row;} #menu li {display: table-cell;} 

..which will simulate the behaviour. Note that in IE it will, as usual, cause problems in the lower versions.

Please note: The original poster edited their question to exclude percent after I posted this answer.

Yes, you simply need to figure out the percent that each will use. In this case, 20%.

Also, you have some slight problems with your HTML (missing quote and width= instead of the correct width:).

<style> ol { width:800px;display :block;float:left; } li { border:1px solid black; display :block;float:left; width:20%; } </style> <ol> <li> Item 1 </li> <li> Item 2 </li> <li> Item 3 </li> <li> Item 4 </li> </ol> 

Update:

While you can get away without defining pixels by using a percentage, there is no way with block elements to get away without defining any width value (and width values are only valid as a unit or a percentage).

Not that I'm suggesting you use tables, but table cells are the only elements in HTML that sort of behave like what you are asking for.