页脚内容重叠包装div

Question

我的页脚内容与我的css和html中的包装div重叠，当我将高度更改为auto时它没有工作。 下面是我正在处理的页面的一个例子。

包装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;

}

Example

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中添加了所有虚拟内容。