Question

A note ahead: I did look for answers before asking but none of which i found accurately explained how to do this right.

I have some DIVs, somewhere within i have an UL which is supposed to stretch to a 100% of the parent DIV, and within the UL i have a (varying, due to dynamic content) amount of LI-elements which i would like to equally share the space the parent UL provides to them (which obviously should be 100%).

I tried various solutions, such as inline-block on the LIs, as well as float:left and automatic width on the LIs

I created a JSFiddle here.

How can i achieve the desired result (with no use of JS) and at least major cross-browser compatibility?

Answer 1

Use display: table; with width: 100%; on the UL and display: table-cell; on the LIs:

ul {
    display: table;
    width: 100%;
}
li {
    display: table-cell;
    background: #eee;
}

http://jsfiddle.net/Kyle_Sevenoaks/EfWze/1/