Sidetrack height in container

Question

I have a set of side by side divs (actually using HTML5 sections, but I assume the solution and behavior are the same). They sit in a container with the right side holding the form fields, and the left side with a summary heading 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> 

Trap: I need to hide or show various fields depending on the actions performed using javascript, so the actual height of the right side and the container is not static. I need the left side to fill the height of the container so that it matches the rule. I have tried many solutions on the Internet, but nobody is 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 to use this. Try clicking on any of the "Column #" text elements to remove them from the document ... the columns will significantly resize :)

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; }​