I am facing an issue with the height of my two columns as I have another column separating them. The challenge is to make the left and right columns extend in height based on the content added to the center column.
One important point to consider is that setting an exact height for the parent div and then using "height: 100%" for the side columns is not a viable option due to varying amounts of content in the center column.
Below is my current HTML structure:
<div class="flight">
<div class="flight_no">
<p>QF2290</p>
</div>
<div class="legs">
<div class="leg">
<p>Details</p>
</div>
<div class="leg">
<p>Details</p>
</div>
</div>
<div class="price">
<p>$2500</p>
</div>
</div>
And here is the corresponding CSS:
.flight
{
float: right;
border: 1px solid green;
}
.flight .flight_no, .flight .price
{
border: 1px solid black;
float: left;
width: 100px;
height: 100%;
}
.flight .legs
{
float:left;
}
.flight .legs .leg
{
border: 1px solid black;
position: relative;
height: 100px;
width: 300px;
margin: 20px 0px;
}