Установка высоты div на англ. Высота div

Question

У меня есть div, содержащий два выровненных div s. К сожалению, правый div не имеет надлежащей высоты, как видно из его заднего фона. Как я могу удостовериться, что он будет настолько высок, насколько высока его высота от englobing div?

код HTML:

<div id="engl"> 
    <div id="lleft">Some text text 
    text text text text text text 
    text text text text text text 
    </div> 
    <div id="rright">Other text</div> 
</div> 

CSS-:

#engl { 
    background-color: red; 
    width: 200px; 
    height: auto; 
    overflow: auto; 
} 

#lleft { 
    background-color: yellow; 
    width: 140px; 
    padding: 10px; 
    float: left; 
} 

#rright { 
    background-color: green; 
    width: 40px; 
    float: left; 
    height: inherited; 
} 

JsFiddle: http://jsfiddle.net/9bLLN/1/

Answer 1

Вы можете использовать позиционирование, чтобы сделать это:

#engl { 
    background-color: red; 
    width: 200px; 
    height: auto; 
    overflow: auto; 
    position:relative; /*NEW*/ 
} 
#lleft { 
    background-color: yellow; 
    width: 140px; 
    padding: 10px; 
    float: left; 
} 
#rright { 
    background-color: green; 
    width: 40px; 
    float: left; 
    height: inherited; 
    position: absolute; /*NEW*/ 
    top:0; /*NEW*/ 
    bottom:0; /*NEW*/ 
    right:0; /*NEW*/ 
} 

jsFiddle example

Answer 2

Модифицированный HTML:

<div id="engl"> 
    <div id="lleft">Some text text 
    text text text text text text 
    text text text text text text 
    </div> 
    <div id="rright">Other text</div> 
    <div style="clear: both"></div> 
</div> 

Модифицированный CSS:

#rright { 
    background-color: green; 
    width: 40px; 
    float: left; 
    height: 100%; 
} 

Плавающие элементы не могут сказать свою высоту своим родителям. Это связано с тем, что требуется третий, пустой DIV с «clear: both».

Это решение немного проблематично, поскольку с точки зрения браузеров он не является тривиальным, высота которого должна указывать, какой. Но с текущими браузерами (т.е. 8 +) работает.