HTML/CSS set div to height of sibling
css, html
Solution
I can rack my brain all I want, but I think this can really be solved only using table behaviour, i.e. using `<table>`s (if you need to be IE6 and IE7 compatible) or `display: table / table-row / table-cell` (which is effectively the same thing but won't embarrass you in front of your peers because tables are evil. ;).
I'd go for a table.
Feel free to prove me wrong and post a sane CSS solution, I'd be delighted!
Problem
I have 2 div's contained in a third. One of the contained div's is floated left, the other floated right. I would like the 2 sibling div's to always be at the same height, but am having a problem with this. So far I am only viewing the page in Firefox, and figured I'd worry about any cross-browser issues after I get it working in at least one browser. Here is the markup: ``` <div id="main-container" class="border clearfix"> <div id="left-div" class="border"> ... </div> <div id="right-div" class="border"> ... </div> </div> ``` Here is the CSS: ``` #main-container { position: relative; min-height: 500px; } #left-div { position: relative; float: left; width: 700px; min-height: inherit; } #right-div { position: relative; float: right; width: 248px; min-height: inherit; height: inherit; } .clearfix:after { content: " "; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { display: inline-block; _height: 1%; clear: both; } .clearfix { display: block; clear: both; } .border { border: solid 1px #000; } ``` If the content in the `#left-div` is longer than `500px`, the `#right-div` does not expand to match. In an example I tried, Firefox said the computed style height of the `#main-container` was `804px`, the computed style height of the `#left-div` was `800px`, and the computed style height of the `#right-div` was `586.2px`, as it had expanded to fit it's own content. I understand I might be going about this the wrong way, and if this is a duplicate questions then I apologize, but I wasn't quite sure what to search under.