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 3 of 3
  1. #1
    New Coder
    Join Date
    Oct 2010
    Posts
    28
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Position:absolute affects width

    Hello.

    I'm kinda new to css, and was wondering if anybody can explain to me why the header and the footer in this code have different widths?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    
    <head>
    <style type="text/css">
    
    /*Header*/
    
    #header {background-color: #ffffff; font-weight: normal; font-size: 1.2em; margin: 10px; padding: 4px; letter-spacing: 
    
    0.06em; border-top: solid black 1px; border-bottom: solid black 1px;}
    
    
    /*Footer*/
    
    #footer {background-color: #ffffff; font-weight: normal; font-size: 1.2em; margin: 10px; padding: 4px; letter-spacing: 
    
    0.06em; border-top: solid black 1px; border-bottom: solid black 1px; position:absolute; bottom: 0px;}
    
    </style>
    
    
    </head>
    
    <body>
    
    <div id="header">
    Header
    </div>
    
    
    <div id="footer">
    Footer
    </div>
    
    
    </body>
    </html>
    I understand that it's the position:absolute; bottom: 0px; bit, but can't for the life of me work out why.

    Thanks!

  • #2
    Regular Coder
    Join Date
    Mar 2010
    Location
    Orlando, FL
    Posts
    158
    Thanks
    4
    Thanked 8 Times in 8 Posts
    It's the position:absolute;. Making the div absolute makes the width only as long as the content is inside. By changing absolute to relative, the width of the footer will be the same as the header. Granted, it'll put the footer right under the header, but there are techniques to have it always display at the bottom of the page no matter how much header and body you have.

  • #3
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Why are you using HTML 4 Transitional?


  •  

    Posting Permissions

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