emphaticsunshine emphaticsunshine - 4 months ago 14
CSS Question

List items with same height

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

Ahh, yee old same height column problem.

One solution is to fart around with bottom margin / padding.

Works in IE7+ (might even work using ie6, I don't have it installed)

ul {
    overflow: hidden;
    border: 1px solid black;
    float: left;
}
li {
    float:left;
    width:100px;
    background: red;
    padding-bottom: 10000px;
    margin-bottom: -10000px;
}
li + li {
    border-left: 1px solid black;
}

JSfiddle Demo