css - 页脚内容重叠包装 div

Question

我的页脚内容与我的css和html中的包装器div重叠，当我将高度更改为自动时它不起作用。下面是我正在处理的页面示例。

包装器 CSS

#wrapper {
width: 1030px;
height: 600px;
margin: 20px auto auto auto;
padding: 0;
background: url(wrapper.png);
}

页脚 CSS

.footer{
width: 1000px;
padding: 60px 0 0 30px;
height: auto;
float: right;
clear: both;
background: url(footer_bg.gif) no-repeat top right;
text-align: center;

}

例子

Answer 1

您需要清除 .content_left 和 content_right 列中的浮动，并删除与 #wrapper 关联的高度：

http://jsfiddle.net/L6acE/3/

清除浮动有几种不同的方法。我采用了一种非常简单的方法，即<div style="clear:both;">在此处讨论的两列之后添加一个：

http://css-tricks.com/the-how-and-why-of-clearing-floats/

但我通常会使用这里讨论的 clearfix 方法：

http://nicolasgallagher.com/micro-clearfix-hack/

我还word-wrap:break-word为您的左列添加了一些 CSS 来包装您的所有虚拟内容。