Контейнер не перемасштабирования для ребенка DIV

Question

Click here for visual

Как видно из рисунка, мой родительский контейнер не расширяется, чтобы соответствовать моему ребёнку контейнер. Контейнер страницы (#contain) фактически останавливается в нижнем левом углу фотографии кухни. Детский контейнер (# zone2) явно переполняется вне его родительского контейнера (#contain). Я бы хотел иметь (#contain) автоматически расширяться, чтобы соответствовать (# zone2). CSS является:

#contain { 
    position: relative; 
    width: 100%; 
    margin: 0 px; 
    background: #E3DCCC; 
    z-index: 0; 
} 

#zone1 { 
    width: 100%; 
    height: 850px; 
    background: url(http://waly1039.com/sites/default/files/k4.jpg) no-repeat center top; 
    position: absolute; 
    z-index: -1; 
} 
#head { 
    position: absolute; 
    top: 20px; 
    width: 100%; 
    height: 330px; 
} 

#head img { 
    max-width: auto; 
    height: auto; 
} 

#zone2 { 
    position: relative; 
    overflow: hidden; 
    padding: 3px; 
    top: 360px; 
    float: right; 
    right: 15px; 
    width: 53%; 
    height: auto; 
    border: 4px solid #715E40; 
    background-color: white; 
} 
#zone2 img { 
     max-width:100%; 
     height: auto; 
     float:left; 
     margin: 5px; 
} 

#zone3 { 
    position: relative; 
    top: 710px; 
    left: 15px; 
    float: left; 
    height: 340px; 
    width: 38%; 
    border: 4px solid #715E40; 
    background-color: white; 
} 

Answer 1

Это проблема с плавающей точкой. Попробуйте добавить традиционный CSS четкое исправление контейнера # zone2 в:

.container:after{ 
    visibility: hidden; 
    display: block; 
    font-size: 0; 
    content: " "; 
    clear: both; 
    height: 0; 
} 

Не забудьте положить это в: после выбора псевдо, в противном случае он не будет работать для вас. Плавающие элементы существуют вне нормального потока документов, поэтому контейнер не расширяется, чтобы их содержать. Четкое исправление заставляет поплавки очищаться, что приведет к расширению контейнера вокруг нижней части этого элемента.

Answer 2

Я тестировал добавление большего количества изображений в #zone2 и #contain расширяется вертикально. Так или иначе у вас есть элемент (ы) в #zone2 с заполнением или полями, которые не добавляются к общей высоте родителя.

Если вы хотите скорейшее исправить, чтобы перейти дальше, добавьте margin-bottom: 30px; в #zone2.

Answer 3

Я продублировал вашу проблему и смог решить ее с помощью этого вопроса. Возможно, вы захотите попробовать. Это выглядит немного странно, поэтому сделайте для него класс, если хотите. Я больше беспокоюсь о том, где он находится.

Под строками вашего кода добавьте мою третью строку. Только это, и вы закончили. Обратите внимание, что это больше касается позиционирования.

<div id="zone3"></div> 
<div id="zoneclear"></div> 
<br style="clear:both; float:none; display:block; height:1px;" /> 

Просто добавьте третью строку.

и просто изменить один из ваших стилей:

#zoneclear { 
    clear: both; 
    float:none; 
    display:block; 
    height: 30px; 
    position: relative; 
} 

[EDIT] Кодов имеют серьезную ошибку в светлячок, который не присутствует в Google Chrome (который я испытал в ранее из-за ваше относительное позиционирование. Таким образом, я изменил стиль #zoneclear, чтобы установить, что вы, возможно, придется проверить, если другие браузеры как этот хак

Я надеюсь, что это помогает вам