How to set height of element to match height of another element?
Question by Jordan
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.
EDIT: I’ve solved this problem by just using tables. Thanks for the replies.
Answer by Chords
Jordan – welcome to Stack Overflow!
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.
EDIT
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());
});
Answer by Starx
Extending div to correct height, or lets say 100% height of the container, You have to chain height:100% up to the container with fixed height or to the body with another height: 100%;. On the long run, you will probably require this solution.
Since there is no fixed height, I used height: 100% and chained up to the body an html.
body, html { height: 100%; }
.flight
{
float: right;
border: 1px solid green;
height: 100%;
}
TO give exact height of container to the sidebars, you either have to use fixed height or use javascript.
