Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    922
    Thanks
    76
    Thanked 29 Times in 29 Posts

    CSS Bottom property

    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:
    Code:
    <div id="footer">
         <div id="copyright">
             <span id="author">Attitude Brothaz &copy; Copyright 2011</span>
    	 </div>
    </div>
    CSS:
    Code:
    #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.
    Last edited by LearningCoder; 09-17-2011 at 01:23 AM. Reason: explained better

  • #2
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,718
    Thanks
    41
    Thanked 191 Times in 190 Posts
    try making the copyright absolute instead... although i think a better approach would be to do something like...
    Code:
    #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

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • Users who have thanked alykins for this post:

    LearningCoder (09-17-2011)

  • #3
    New Coder
    Join Date
    Sep 2011
    Posts
    40
    Thanks
    4
    Thanked 1 Time in 1 Post
    I prefer this to the solution above me:

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

  • #4
    New Coder
    Join Date
    Sep 2011
    Posts
    40
    Thanks
    4
    Thanked 1 Time in 1 Post
    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:
    Code:
    #footer {border: 2px solid #f7852c;
    		 clear: both;
    		 height: 300px;
    		 position:relative;}
    		 
    #copyright {width: 400px;
                position: absolute;
    			bottom: 0px;
    			border: 2px solid black;}
    Last edited by Kremlin; 09-17-2011 at 10:19 AM.

  • #5
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    922
    Thanks
    76
    Thanked 29 Times in 29 Posts
    Quote Originally Posted by Kremlin View Post
    I prefer this to the solution above me:

    Code:
    #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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •