html - List items with same height

Question

I have created a fiddle: http://jsfiddle.net/pQZ8f/

I want to have both the list items to be of same height without setting height manually. I want it to auto grow. I don't want to use javascript. Can it done be through css?

Answer 1

It seems you're looking for a tabular layout, so maybe the best bet would be to use a <table> instead of floating <li> elements.

That said, you can also specify tabular styles on your elements:

ul {
    display: table-row;
}

li {
    width: 100px;
    border: 1px solid black;
    display: table-cell;
}

This should work on most modern browsers. You will find an updated fiddle here.