...

View Full Version : CSS Bottom property



LearningCoder
09-17-2011, 02:15 AM
Hello, I am trying to design my footer and I would like a copyright statement to be at the very bottom of the footer div. I am trying to use the bottom property set to 0 pixels but it is not moving.

Here is my relevant code:

HTML:


<div id="footer">
<div id="copyright">
<span id="author">Attitude Brothaz &copy; Copyright 2011</span>
</div>
</div>


CSS:


#footer {border: 2px solid #f7852c;
clear: both;
height: 300px;}

#copyright {width: 400px;
position: relative;
bottom: 0px;
border: 2px solid black;}

#author {font-family: century gothic;
font-size: 10pt;
text-decoration: underline;
color: gray;}


Also, please see attached link for a visual:- http://abjava.host22.com/footerbottom.png

Appreciate some help, it's definitely something to do with the css, i'm not sure if it's the positioning? I've tried various position values yet to no avail. I can get the copyright statement there but I have to use negative values with the bottom property which I don't like because not all the pages will be the same height.

Regards,

LC.

alykins
09-17-2011, 02:27 AM
try making the copyright absolute instead... although i think a better approach would be to do something like...


#footer
{width:400px; height:300px;}
#footer_upper
{height:275px;}
#footer_bottom
{height:25px;}
.author
{....}
.copyright
{....}
.....
<div id="footer">
<div id="footer_upper"><span class="author"></span></div>
<div id="footer_bottom"><span class="copyright"></span></div>
</div>


although you dont even need to have the spans; you could use <p>'s too... or even just assign the class to the div for that matter

Kremlin
09-17-2011, 11:09 AM
I prefer this to the solution above me:



#copyright {width: 400px;
position: relative;
top: 279px;
border: 2px solid black;}

Kremlin
09-17-2011, 11:13 AM
Another solution, better than both above, is to make sure the #footer has "position:relative" and then make your #copyright have "position:absolute" and "bottom:0px"

absolute apparently works for the first non-static parent, so if you don't make #footer relative, and you DO make #copyright absolute, the copyright will position itself at the bottom relative to body instead of footer

this worked for me:

#footer {border: 2px solid #f7852c;
clear: both;
height: 300px;
position:relative;}

#copyright {width: 400px;
position: absolute;
bottom: 0px;
border: 2px solid black;}

LearningCoder
09-17-2011, 02:15 PM
I prefer this to the solution above me:



#copyright {width: 400px;
position: relative;
top: 279px;
border: 2px solid black;}


Only problem with this is that all my other pages; news, members, forums, server and help may reach further than 279px from the top of the window. For example, I could have my members page which in total height reaches 300px. If this is so, my copyright element will be displayed 21px from the bottom.

Thanks for the input though.

I've actually took alykins advice and used his example, it's not ideally what I would like but I managed to work on it last night and got everything where I wanted it and it looked good in all browsers. For that reason, I'll stick with that and if needs be, change the code later on. I just want to get a 'template' down and finished.

I'm still going to have a look at the bottom property anyhow, maybe create a new page with just a few divs. Positioning is one of my pains.

Regards,

LC.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum