...

View Full Version : footer moves relative to content in CSS



luzhuangzhuang
08-10-2007, 05:47 AM
Hello Everyone,

I am new to CSS and understand a few basic things about the positioning side of a stylesheet, but I have a problem. I have a footer, and a content box. But since my footer is fixed, when the content box grows longer with text, it overlaps the footer. How can I tell the footer to move down whilst keeping a small gap between it and the content box?

Thanks for any help you can give, and if its needed, here is my info;

#content {
z-index: 1;
position: absolute;
left: 380px;
top: 290px;
background-color: #cc3300;
width: 435px;
height: 200px;
padding: 30px;
color: white;
}

#footer {
z-index: 1;
position: absolute;
left: 180px;
top: 565px;
background-color: #0099CC;
width: 900px;
padding: 10px;
color: white;
}

Len Whistler
08-10-2007, 07:21 AM
You should make all your divisions "relative" then they will push each other down with the content. margin-left and right set to auto will center the division.


#footer {
z-index: 1;
position: relative;
margin-left: auto;
margin-right: auto;
background-color: #0099CC;
width: 900px;
padding: 10px;
color: white;
}

garydarling
08-10-2007, 07:39 AM
Most likely you need to get rid of the absolute positioning of the footer. Since you didn't post your html, I can't say if you have any nesting issues, but this should work:

HTML:



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

<div id="footer">Blah</div>
</div>


CSS:



#wrap {
background:#ffffff;
color:#404040;
width:900px;
margin: 0px auto; /*centers the content in the browser window*/
padding:0;
text-align: left;
}
#content {
margin:290px 0 0 380px;
padding:10px;
background-color: #cc3300;
width: 435px;
color:white;
}
#footer {
clear:both;
margin:0 auto 0 180px;
background-color: #0099CC;
width: 900px; /* or 100%*/
padding: 10px;
color: white;
}


You can play around with the margins until you get it right, but the clear:both is key to keeping the footer div below the container div.

luzhuangzhuang
08-10-2007, 03:26 PM
thanks guys, problem sorted. Great advice.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum