emphaticsunshine emphaticsunshine - 1 year ago 118
CSS Question

List items with same height

I have created a fiddle:

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 Source

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 {
    background: red;
    padding-bottom: 10000px;
    margin-bottom: -10000px;
li + li {
    border-left: 1px solid black;

JSfiddle Demo

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download