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 6 of 6
  1. #1
    New Coder
    Join Date
    Jun 2010
    Posts
    43
    Thanks
    12
    Thanked 0 Times in 0 Posts

    CSS Footer positioning

    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:

    Code:
    <!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!
    Last edited by sterlingcooper; 12-22-2010 at 07:14 PM.

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Here's a quick fix, if I understand what you're wanting.


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

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

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

  • Users who have thanked teedoff for this post:

    sterlingcooper (12-22-2010)

  • #3
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    If you apply:

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

  • Users who have thanked SB65 for this post:

    sterlingcooper (12-22-2010)

  • #4
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by SB65 View Post
    If you apply:

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

  • #5
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Heh, well I thought perhaps he did want a sticky footer and hence maybe you were right.... Like you said, one of the solutions should do the job.

  • #6
    New Coder
    Join Date
    Jun 2010
    Posts
    43
    Thanks
    12
    Thanked 0 Times in 0 Posts
    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!


  •  

    Posting Permissions

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