Как расширить DIV с плавали DIV внутри

Question

У меня есть следующий HTML:

<div id="site_content"> 
    <div id="left_content"> 
     text 
    </div> 
    <div id="right_content"> 
     <%= image_tag "image.jpg" %> 
    </div> 
</div> 

Мой «image.jpg» в моем «right_content» DIV больше по вертикали, чем мой text в моей «left_content». «site_content» расширяется только до размера text, и мой «image.jpg» отключается. Я хотел бы, чтобы «site_content» расширялся до размера изображения. Вот мой CSS:

#site_content { 
    width: 950px; 
    overflow: hidden; 
    margin: 4px auto 0 auto; 
    padding: 0; 
} 
#left_content { 
    float: left; 
    text-align: justify; 
    width: 444px; 
    padding: 20px 0 5px 25px; 
    margin: 0; 
} 
#right_content { 
    float: right; 
    width: 450px; 
    padding: 0; 
    overflow: hidden; 
} 

Answer 1

Это классическая проблема clearfix.

Например, если вы добавили DIV после 2 плавали дивы и прикладные clear: both атрибута вы должны найти высоту расширяется, т.е.

<div id="site_content"> 
    <div id="left_content"> 
     text 
    </div> 
    <div id="right_content"> 
     <%= image_tag "image.jpg" %> 
    </div> 
    <div style="clear: both"></div> 
</div> 

Вы также мог бы достичь его в аккуратном способе с использованием CSS, например,

#right_content:after { 
    clear: both; 
} 

Однако, в настоящее время это более надежно использовать атрибут display, а не плавающие див для достижения макета таблицы, как, например,

#site_content { 
    display: table; 
} 
#left_content, #right_content { 
    display: table-cell; 
} 

даст вам тот же тип компоновки т.е.

   site_content 
_____________________________________ 
|     |     | 
|     |     | 
| left_content | right_content | 
|     |     | 
|_________________|_________________|