columns with div's

[yaragalla_mural]

Hi with the following code i am able to bring 3 Div's in a single row which are surrounded by a parent DIV. Now the problem is separating each div with a vertical line which makes it look like table cells in a single row. This can be done easily by applying "border-right" on each DIV. But here there is a problem.

In these 3 div's Every div grows(height) independently based on the size of the content. So all the vertical lines should be of the height of the highest Div's height. I mean for example in the 3 div's suppose, first div height is 100px and second div height is 200px and third div height is 50px. Now all the vertical lines separating Div's should be of 200px. So it looks like real cells in a single row. Kindly help me in solving this problem?

<div style="border:2px solid red; overflow: hidden;">
   <div style="width:100px;height:100px;border:2px solid yellow;float:left;"></div>
   <div style="width:100px;height:100px;border:2px solid black;float:left">   </div>
   <div style="width:100px;height:100px;border:2px solid black;float:left">   </div>
 </div>

Thanks in advance.

Thanks and Regards,
Muralidhar Yaragalla.

[pixelsoul]

It is sort of a hassle doing this with just markup and css. When ever I need to set heights based on the height of something else, I usually just modify that elements height in the dom with jQuery/JavaScript.

Example: http://jsfiddle.net/pixelsoul/DpZTN/

A lot of times it is better to use an actual html table if you can, that is what a table was designed for.

[yaragalla_mural]

Hi thanks for your reply. This really helped me.