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's 2018, and we have display: flex, with 97.66% browser support (https://caniuse.com/#feat=flexbox)

With flexbox, all you need to do is:

ul {
  display: flex;
}

li{
 width:100px;
 border: 1px solid black;   
}

Here's the fiddle: http://jsfiddle.net/pQZ8f/1076/

Answer 2

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.