Question

I currently have two columns, with another column in-between them. What I want is to have the left and right columns extend in height as the centre column has more content added to it.

Something to note is that I cannot set an exact height for the parent div and then have the left and right columns set to "height: 100%". This is because there could be only a small amount of content in the centre column, or a lot.

Here’s my current HTML:

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

Here’s my current 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;
}

Answer 1

It looks like you’re going to have to implement a Javascript approach. The way I would go about it would be to grab the height of .legs then apply it to .flight_no and .price.

The only other option I can think of would be to “fake it” by giving .flight a background image that would include however your left and right columns are stylistically different, then repeat-y in your CSS. If you do that, the sidebars wouldn’t actually have to span the same height.

Something like this, using jQuery, will dynamically set your sidebars to the height of the middle column.

$(document).ready(function() {
  $(".flight_no, .price").css("height", $(".legs").height());
});

---

Edit:

Times have changed — jQuery is not the juggernaut it once was, and we welcomed Flexbox to the world. See this SO page for column-based solutions:

CSS – Equal Height Columns?