У меня есть 2 div, содержащихся в третьем. Один из содержащихся div перемещается слева, другой - справа. Я бы хотел, чтобы 2 div div div всегда были на одном уровне, но у меня проблема с этим. Пока я просматриваю только страницу в Firefox и полагаю, что буду беспокоиться о проблемах с несколькими браузерами после того, как я заработаю хотя бы один браузер.
Вот разметка:
<div id="main-container" class="border clearfix">
<div id="left-div" class="border">
...
</div>
<div id="right-div" class="border">
...
</div>
</div>
Вот 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
, поскольку он расширился, чтобы соответствовать его собственному контенту.
Я понимаю, что я ошибаюсь, и если это повторяющиеся вопросы, я извиняюсь, но я не был уверен, что искать.