div нижнего колонтитула находится в неправильном месте

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), но начинается со странной точки.

это демонстрация

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

и, может ли кто-нибудь связать меня с хорошим руководством по обучению и поплавать?

Я думаю, что это причина, почему это испортилось, но не может понять, что это значит, для новичков в интерфейсе.