CODEWITHSUNDEEP
htmlcss
Canna
Canna

Reputation: 3794

footer div is positioning to a wrong place

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;
}

I want the footer div starting from the left side(same as content and header div), but it starts with a weird point.

this is the demo

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

and, can somebody link me on good tutorial understanding position and float?

i think this is the reason, why this messed up, but can't understand what it means, for a newbie front-end designing.

Upvotes: 0

Views: 292

Answers (2)

Ankur Dhanuka
Ankur Dhanuka

Reputation: 1237

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;
}

check this fiddle

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

Upvotes: 0

Khizer Najeeb
Khizer Najeeb

Reputation: 507

Add left:0px; in your sidebar id #sidebar

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

Upvotes: 1

Related Questions