...

View Full Version : footer problem (CSS)



warbel
08-09-2011, 03:03 AM
Hi!
I have a problem with my footer ... it doesn't stay where i want it to stay :(
I want my footer to be under everything, but it keeps going to wrong place .
My HTML looks like this:

<body>
<div id="wrapper">
<div id="header">
<div id="field1"></div>
<div id="field2"></div>
</div>
<div id="menu">
<div id="field3"></div>
<div id="field4"></div>
<div id="field5"></div>
</div>
<div id="container">
<div id="field6">
<div id="field8"></div>
<div id="field9"></div>
</div>
<div id="field7">
<div id="field10">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
</div>
<div id="footer"></div>
</div>
</body>

and CSS looks like that:

#wrapper {
width:1000px;
height:auto;
margin-left:auto;
margin-right:auto;
}

/*header*/

#header {
width:1000px;
height:250px;
margin-left:auto;
margin-right:auto;
}
#field1 {
width:250px;
height:250px;
float:left;
background-color:#333333;
}
#field2 {
width:750px;
height:250px;
float:right;
background-color:#666666;
}

/*menu*/
#menu {
width:1000px;
height:40px;
margin-left:auto;
margin-right:auto;
}
#field3 {
width:700px;
height:40px;
float:left;
background-color:#999999;
}
#field4 {
width:200px;
height:40px;
float:left;
background-color:#000000;
}
#field5 {
width:100px;
height:40px;
float:right;
background-color:#333333;
}

/*container*/

#container {
width:1000px;
height:auto;
margin-left:auto;
margin-right:auto;
}
#field6 {
width:250px;
height:500px;
float:left;
}
#field7 {
width:750px;
height:auto;
float:right;
}

/*field6*/
#field8 {
width:250px;
height:250px;
background-color:#333333;
float:left;
}
#field9 {
width:250px;
height:250px;
background-color:#666666;
float:left;
}

/*field7*/
#field10 {
width:740px;
height:auto;
margin-left:10px;
margin-top:10px;
background-color:#999999;
}

#footer {
width:1000px;
height:40px;
margin-left:auto;
margin-right:auto;
background-color:#FF0000;
}

I know that my footer goes there because of container .. if i put specific height for it, it's all good, but i want it to be auto. I tried even deleting field7 and only leave field10 with auto height, but it still didn't work, footer was once again in wrong position..

What i'm asking you guys is what should i do to get footer to right position and leave field10 with auto height..

Damn i hope you understood what i meant.. :D anyways, i hope you can help me :)

Mart.

alykins
08-09-2011, 03:17 AM
put the footer outside the content, and then give the content a margin-bottom:-40px;... then you can leave the field divs alone...

warbel
08-09-2011, 03:11 PM
put the footer outside the content, and then give the content a margin-bottom:-40px;... then you can leave the field divs alone...

I'm not sure what you mean, because i think that footer is outside the content .. you mean outside the wrapper?

maybe you can give me code sample?

teedoff
08-09-2011, 03:43 PM
Are you clearing your floats (http://www.sitepoint.com/simple-clearing-of-floats/)??

I like method "d" best and works in MOST cases.

warbel
08-19-2011, 03:50 PM
Are you clearing your floats (http://www.sitepoint.com/simple-clearing-of-floats/)??

I like method "d" best and works in MOST cases.

Yup, that was the problem :D .. thanks man:thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum