容器div和溢出问题

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

更改此 id 的 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;
}

更新： 也更改此 id 的 css.. 适用于 Chrome.. 在 Linux 上，所以.. 尚未在 IE9 上测试过它

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

Answer 2

您想要向该容器添加一个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;}