Проблемы с контейнером и переполнением

Question

ОК, поэтому у меня есть внутренний div, который предназначен для содержания текста, изображений и т. Д.
В этом случае изображения плавают.
После того, как внутренний div является нижним колонтитулом, это моя проблема.Что бы я ни пытался, внутренний div не будет расширяться вокруг изображений, и, следовательно, нижний колонтитул не будет сидеть под изображениями.

Пример можно увидеть здесь: http://baradineholdings.com.au/about2.php

#internal
{
    width: 960px;
    height: auto;
    background-color: white;
    border: 1px solid #ccc;
}

#row {
    min-width: 480px;
    display: block;
}

#movers-row {
    margin: -406px 0 0 121px;
}

#movers-row div {
    width: 49.9%;
    float: left;
}

#movers-row div img {
    float: right;
} 

#footer {
    width: 960px;
    height: 98px;
    border-top: 1px outset #ccc;
    border-bottom: 1px solid #ccc;
    border: 1px solid #ccc;
    background-color: white;
}

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

Answer 1

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

Попробуйте это с html5 Boilerplate: http://html5boilerplate.com/html5boilerplate-site/built/en_US/docs/css/#clearfix-

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; clear: both;}

Answer 2

изменить свой CSS этого идентификатора ..

#footer {
 width: 960px;
 height: 98px;
 border-top: 1px outset #ccc;
 border-bottom: 1px solid #ccc;
 border: 1px solid #ccc;
 background-color: white;
 position:relative;
 float:left;
}

Обновление: Также измените css этого идентификатора .. работает на Chrome .. на linux, так что .. проверил его на IE9

#movers-row {
 margin: -406px 0 0 121px;
 height: auto;
 overflow: hidden;
}