所有其他div完成后如何使页脚div启动

Question

更新：点击此处的演示：http://amit-verma.com/template_test/

我对页脚div的对齐有轻微问题。 我在顶部有一个标题。

div = maincontent
{
  两个div为内容，并排   另外2个div并排在内容div之下。
}

//只是为了表示。我知道这不是HTML;）

现在我希望在maincontent div完成后启动页脚div。如果我为maincontent div指定固定高度，我可以这样做。但我不想指定它的高度。如果我没有指定高度，则页脚div从页面中间开始。

我做错了什么？

代码

侧栏{

margin-top: 10px;
width: 300px;
float: right;
text-align: justify;
font-size: 14px;
line-height: 18px;
color: #FFF;

}

maincontent {

margin-top: 10px;
width: 620px;
height: 590px;
text-align: justify;
font-size: 14px;
line-height: 18px;

}

maincontent .rect {

width: 580px;
background-color: #dbdddf;
margin-right: 10px;
padding: 15px;

}

maincontent .square {

width: 270px;
float: left;
min-height: 270px;
margin-top: 10px;
margin-right: 10px;
background-color: #c6c7c7;
padding: 15px;

}

页脚{

background-color: #b1977f;
width: 880px;
font-size: 14px;
padding: 20px;
text-align: left;
color: #FFF;

}

HTML

   <div id="sidebar">
    <div class="box">
        </div>
    <div class="box">
        </div>
    </div>

<div id="maincontent">
    <div class="rect">
        </div>
    <div class="square">
        </div>
    <div class="square">

        </div>
    </div>

<div id="footer">
    </div>

Answer 1

你有机会获得这个托管所以我们可以真正看到问题吗？尝试将页脚向左移动，并将其清除：两者都放在上面。

Answer 2

尝试

clear:both;

关于内容和

float:left;

页脚上的

编辑：

#footer {
background-color: #b1977f; 
width: 880px; 
font-size: 14px; 
padding: 20px; 
text-align: left; 
color: #FFF; 
float:left;
}

它在CSS上有＃吗？

Answer 3

你可以使用clear'夺走'浮动效果对一个元素及其子元素。它有3个值：左侧浮点数为clear: left;，两者为clear: right; for right floats and clear: both;，显然。