CODEWITHSUNDEEP
htmlcss
homerun
homerun

Reputation: 20745

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 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.

Upvotes: 1

Views: 341

Answers (3)

bjornruysen
bjornruysen

Reputation: 850

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

Upvotes: 0

sandeep
sandeep

Reputation: 92803

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/

Upvotes: 3

Selvakumar Ponnusamy
Selvakumar Ponnusamy

Reputation: 5533

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

Upvotes: 0

Related Questions