...

View Full Version : Resolved CSS Footer positioning



sterlingcooper
12-22-2010, 07:37 PM
Hi, I'm trying to position a footer. I may be going about this wrong as I am still learning, but this is what I've done:



<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#container {
position: relative;
background-color: gray;
margin: 0px auto;
width: 100%;
height: 1000px;
}

#coloredBox {
position: relative;
background-color:white;
width: 800px;
height: 825px;
border: 3px solid black;
top: 20px;
margin: 0px auto;
}

body {
background-color: gray;
}

h1 {
text-align: center;
}

p {
margin-left: 50px;
margin-right: 50px;
}

#footer {
width: 700px;
height: 50px;
margin-left: 50px;
margin-right: 50px;
background-color: orange;
}

#footer p {
text-align: center;
padding-top: 10px;
}

</style>

<title>Footer Test</title>
</head>

<body>
<div id="container">
<div id="coloredBox">
<h1>Footer Test</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ligula ante, accumsan in vehicula eu, tempus a massa. Vestibulum odio mi, accumsan ut pulvinar eget, tincidunt id sem. Sed id nisi ut sapien tempor luctus in id purus. Phasellus consequat, tellus nec fermentum feugiat, mauris enim tincidunt libero, at malesuada lorem nisl non augue. Sed nec nulla justo. Curabitur lorem felis, pellentesque ullamcorper tempor vitae, hendrerit in sapien. Pellentesque dui justo, ullamcorper sed aliquet non, tristique nec nulla. Quisque adipiscing metus imperdiet sem placerat ac pharetra nisi semper. In vitae ante nec augue molestie porttitor. Maecenas quis aliquam orci. Duis laoreet diam vel nibh hendrerit et malesuada lectus aliquet. Curabitur condimentum justo non lorem volutpat rhoncus quis sit amet ligula. Donec condimentum consectetur tortor, quis vulputate mi pulvinar et. Donec erat purus, elementum eget rhoncus et, consequat eget mauris. Donec vitae consectetur tortor. Maecenas at ornare tellus. Pellentesque erat turpis, consectetur in dignissim gravida, lacinia vel velit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin odio dui, lobortis sed commodo nec, sollicitudin id nunc.</p>

<div id="footer">
<p>Footer content goes here.</p>
</div><!--footer-->
</div><!--coloredBox-->
</div><!--container-->


</body>

</html>



I need to be able to get that orange footer box to always be at the bottom of that white box, with maybe a bit of margin at the bottom. I could position this absolutely right now, but if I create another document that has a different height, then I'd have to manually reposition the footer. I just want it to automatically know that it needs to be at the very bottom of that white box, regardless of how tall the white box may be.

Also, if you notice that I put the page together wrong, please let me know, this is the basic template I use when starting a new page.

Any insight would be very helpful, thanks!

teedoff
12-22-2010, 07:44 PM
Here's a quick fix, if I understand what you're wanting.


Move your footer div outside your your coloredBox div like so:


dui, lobortis sed commodo nec, sollicitudin id nunc.</p>
</div>
<!--coloredBox-->
<div id="footer">
<p>Footer content goes here.</p>
</div>
<!--footer-->
</div>
<!--container-->

</body>
</html>

Then change a bit of your footer style like so:


#footer {
width: 800px;
height: 50px;
margin-left: auto;
margin-right: auto;
background-color: orange;
}

Hope that helps!

btw, you shouldn't be using position absolute, but only in rare cases. It would cause problems when users with different size view ports viewed your site.

SB65
12-22-2010, 07:49 PM
If you apply:


#footer {
background-color: orange;
bottom: 0;
height: 50px;
margin-left: 50px;
margin-right: 50px;
position: absolute;
width: 700px;
}

then #footer will always be positioned exactly at the bottom of #coloredBox, however high #coloredBox is. If you additionally give #coloredBox a padding-bottom equal to the height of #footer then that will ensure that content in #coloredBox doesn't disappear behind #footer.

I'm assuming here that you're trying to apply the footer to an article on a page, rather than the page itself. If by any chance it is the latter, then try Googling "sticky footer".

EDIT: I see teedoff has a slightly different interpretation of what it is you're trying to do. Depends on whether you want the footer at the bottom of the page or the article...

teedoff
12-22-2010, 08:00 PM
If you apply:


#footer {
background-color: orange;
bottom: 0;
height: 50px;
margin-left: 50px;
margin-right: 50px;
position: absolute;
width: 700px;
}

then #footer will always be positioned exactly at the bottom of #coloredBox, however high #coloredBox is. If you additionally give #coloredBox a padding-bottom equal to the height of #footer then that will ensure that content in #coloredBox doesn't disappear behind #footer.

I'm assuming here that you're trying to apply the footer to an article on a page, rather than the page itself. If by any chance it is the latter, then try Googling "sticky footer".

EDIT: I see teedoff has a slightly different interpretation of what it is you're trying to do. Depends on whether you want the footer at the bottom of the page or the article...

Yes I thought your solution would be more what he was looking for after I made the changes I did and then looked back. lol Oh well..he has options now.

SB65
12-22-2010, 08:04 PM
Heh, well I thought perhaps he did want a sticky footer and hence maybe you were right....:D Like you said, one of the solutions should do the job.

sterlingcooper
12-22-2010, 08:13 PM
Thanks both, I did want it within the the white box but the first suggestion helps too because it won't always be within a box. So I appreciate it.

Works in my test code I just put up, but when I try it on my actual site, the orange footer box sticks to the very TOP of the document. Maybe something to do with the absolute positioning, just about every element on my page is absolute positioned. But now I know the right way to lay it out.

Thanks!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum