html - 页脚 div 定位到错误的位置

Question

html

<div id="wrap">
<div id="header">
header
</div>
<div id="content">
content
</div>

<div id="sidebar">
in here will be login module
</div>
</div>
<div id="footer">
asdfasdf
</div>

CSS

#wrap{
    width:100%;
    margin:0 auto;
}
#header{
    width:100%;
    height:50px;
    background:orange;
}
#content{
    width:100%;
    height:500px;
    background:green;
    float:;
}
#sidebar{
    width:25%;
    height:550px;
    background:red;
    float:left;
    position:relative;
    bottom:550px;
    left:20px;
}
#footer{

float:left;
position:ralative;
}

我希望页脚 div 从左侧开始(与内容和页眉 div 相同)，但它以一个奇怪的点开始。

这是演示

http://jsfiddle.net/64Uq5/3/

并且，有人可以将我与理解位置和 float 的良好教程联系起来吗？

我认为这就是为什么会搞砸的原因，但对于前端设计新手来说，我不明白这意味着什么。

Answer 1

添加 left:0px; 在你的侧边栏 id #sidebar

#sidebar {
宽度:25%;
高度:550px;
背景:红色；
float :左；
position:relative；
底部:550px;
左:0;
}