html+通过id设置高度,HTML/CSS将div设置为兄弟的高度

我有3个div包含在第三个.其中一个包含的div向左浮动,另一个向右浮动.我希望2兄弟div总是处于同一高度,但我遇到了这个问题.到目前为止,我只在Firefox中查看该页面,并且在我至少在一个浏览器中使用它之后发现我担心任何跨浏览器问题.

这是标记:

...

...

这是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; }

如果内容#left-div长于500px,#right-div则不扩展匹配.在我尝试了一个例子,说的Firefox的计算式的高度#main-container是804px,的计算式的高度#left-div是800px和的计算式的高度#right-div是586.2px的,因为它已经扩展到适合它自己的内容.

我明白我可能会以错误的方式解决这个问题,如果这是一个重复的问题,那么我道歉,但我不太确定要搜索什么.