Question

I have one container div which contain 2 dynamic height (height haven’t been set) divs side by side , those 2 divs are content divs , sometimes one div have more content than which cause to be more long from the other one , and those two divs have different color , in order to have Aesthetic page view i want those two divs to have equal height

how can i do this without involve javascript?

<div style="width:100px;border:1px solid black;">
    <div style="width:50px;background-color:blue;float:left;">a <br/> b</div>
    <div style="width:50px;background-color:red;float:left;">a</div>
    <div style="clear:both"></div>
</div>

live example : http://jsfiddle.net/Vbkhq/

in the example above you can see that the blue div is bigger than the red div because it contain more content , what i want to do is what ever content the other div have the both divs have equal height and be look with similar size.

thank you in advance.

Answer 1

You can use display:table property for this:

.parent{
    width:100px;
    display:table;
    border:1px solid green;
}
.child{
    width:50px;
    background:blue;
    display:table-cell;
}
.child + .child{background:red;}

http://jsfiddle.net/Vbkhq/7/