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/

并且，有人可以通过良好的教程理解位置和浮动链接我吗？

我认为这就是原因，为什么这个搞砸了，但是无法理解它对新手前端设计意味着什么。

Answer 1

在侧边栏标识left:0px;

中添加#sidebar

#sidebar {
width: 25%;
height: 550px;
background: red;
float: left;
position: relative;
bottom: 550px;
left: 0;
}

Answer 2

HTML

<div style="clear:both"></div> //include this division before footer division
<div id="footer">
asdfasdf
</div>

CSS

#footer{
position:ralative;
float : left;
margin-top : -550px;
}

检查这个小提琴

http://jsfiddle.net/ankurdhanuka/Lgyku/

页脚div定位到错误的位置

2 个答案: