Question

I’ve got a set of side by side divs (actually using HTML5 sections but I’m assuming the solution and behavior is just the same). They sit in a container with the right side holding form fields and left side a summary title and information. The structure looks something like this:

<div id="container">
    <div id="left" >Summary here</div>
    <div id="right">Form fields here</div>
</div>

The catch is I have to hide or show various fields depending on actions taken with javascript so the actual height of the right side and container are not static. What I need is to get the left side to fill the height of the container so it will match the right. I’ve tried the numerous solutions on the internet but none seem to be working.

Thanks in advance!

Answer 1

This is a very common question. Take a look at this article… it has all the answers:

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

Now, here’s a quick fiddle of putting that to use. Try clicking on any of the “Column #” text elements to remove them from the document… the columns will resize nicely 🙂

http://jsfiddle.net/UnsungHero97/qUT3d/9/

HTML

<div id="container3">
    <div id="container2">
        <div id="container1">
            <div id="col1">Column 1</div>
            <div id="col2">Column 2</div>
            <div id="col3">Column 3</div>
        </div>
    </div>
</div>

CSS

#container3 {
    float:left;
    width:100%;
    background:green;
    overflow:hidden;
    position:relative;
}
#container2 {
    float:left;
    width:100%;
    background:yellow;
    position:relative;
    right:30%;
}
#container1 {
    float:left;
    width:100%;
    background:red;
    position:relative;
    right:40%;
}
#col1 {
    float:left;
    width:26%;
    position:relative;
    left:72%;
    overflow:hidden;
}
#col2 {
    float:left;
    width:36%;
    position:relative;
    left:76%;
    overflow:hidden;
}
#col3 {
    float:left;
    width:26%;
    position:relative;
    left:80%;
    overflow:hidden;
}​