0

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.

Edited by yaragalla_mural

2
Contributors
2
Replies
25
Views
4 Years
Discussion Span
Last Post by yaragalla_mural
1

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.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.