Html Css Equal Div Height

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

Solution 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/

Solution 2:

I don't think it is possible without Javascript for this situation. But you can handle if you use tables.

Solution 3:

Or look into this: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks