title: HTML/CSS set div to height of sibling
body: <p>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.</p>
  
  <p>Here is the markup:</p>
  
  <pre><code>&lt;div id="main-container" class="border clearfix"&gt;
      &lt;div id="left-div" class="border"&gt;
          ...
      &lt;/div&gt;
      &lt;div id="right-div" class="border"&gt;
          ...
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the CSS:</p>
  
  <pre><code>#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; }
  </code></pre>
  
  <p>If the content in the <code>#left-div</code> is longer than <code>500px</code>, the <code>#right-div</code> does not expand to match.  In an example I tried, Firefox said the computed style height of the <code>#main-container</code> was <code>804px</code>, the computed style height of the <code>#left-div</code> was <code>800px</code>, and the computed style height of the <code>#right-div</code> was <code>586.2px</code>, as it had expanded to fit it's own content.</p>
  
  <p>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.</p>