SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    calif
    Posts
    737
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Changing the footer

    My footer displays all the way across the bottom of the web page, but my header is centered with white space to the right and left of it.
    How can I make the footer centered with white space on both sides?
    Is this where I can make that change, in the css? If so, how please?
    I tried changing some elements, but was unsuccessful.

    Code:
    /*--Footer styles--*/
    #footer {
      width: 100%;
      height: 100px;
      background-color: #000000;
      border-top: 4px solid #800000;
      clear: both;/*Clears all columns and sets the footer at the bottom*/
    }
    
    /*--Set footer width and center--*/
    #footer-wrapper {
      color: #999;
      width: 781px;
      float: left;
      margin: 0 auto;
      padding: 10px 10px;
      
    }
    
    #footer-wrapper p { text-align: center; }

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I'm guessing that the footer wrapper wraps the actual footer as you didn't show the html and if so then something like this should be what you need

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    /*--Footer styles--*/
    #footer {
      width: 781px;
        margin:auto;
      height: 100px;
      background-color: #000000;
      border-top: 4px solid #800000;
      clear: both;/*Clears all columns and sets the footer at the bottom*/
    }
    
    /*--Set footer width and center--*/
    #footer-wrapper {
      color: #999;
      width: 100&#37;;
        background:#fff;
      margin:0;
      padding: 10px 0;
        clear: both
    }
    
    #footer-wrapper p { text-align: center; }
    
    
    </style>
    </head>
    
    <body>
    <div id="footer-wrapper">
    
    <div id="footer">Footer content here</div>
    </div>
    </body>
    </html>

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,567
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, if you closed the other wrapping div which encloses your site (the one with space to the left and right) then the footer iwll go 100&#37; of the viewport so you would need to renest to include the footer in the wrapper before you close it, or set the width to be the same as the wrapper nad give margin:0 auto;
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


Bookmarks

Posting Permissions

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