Как увеличить границу между двумя DIV, когда увеличивается высота DIV?

Question

У меня проблема с высотой DIV. см. изображение, есть 2 тега div и div-1 имеет правую границу с черным цветом. и div-1 и div-2 height не установлены. Я хочу, чтобы любая из этих div-высот, когда увеличивается с контентом, тогда граница между двумя тегами div будет автоматически возрастать и всегда будет похожа на изображение. Если я использовал таблицу, то это было Это проблема. но используя теги div, как это возможно?

-Спасибо.

Answer 1

Если вы не заботитесь о IE7, вы можете использовать display: table-cell, чтобы получить свой макет прямо. Это заставит оба элемента иметь ту же высоту, чтобы граница всегда попадала на ваше черное дно.

div.page { 
    display: table; 
    width: 500px; 
} 
div.page > section { 
    display: table-cell; 
    width: 70%; 
    vertical-align: top; 
    border-right: 1px solid #ccc; 
} 
div.page > aside { 
    display: table-cell; 
    width: 30%; 
    vertical-align: top; 
} 

HTML

<div class="page"> 
    <section>Left</section> 
    <aside>Left</aside> 
</div> 

Demo

http://jsfiddle.net/VEzUG/

Вы можете, конечно, использовать <div> с вместо <section> и <aside>.