html表单sete,HTML/CSS set div to height of sibling

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:

...

...

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.