SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Mar 2003
    Location
    UK
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with footer

    I could do with some help with the footer in my layout
    Page CSS

    The way I have it at the moment is position: absolute; with bottom: 0;. obvously if the page is bigger than the window this causes the footer to overlap the content.

    The footer has to be within the #main-cent div as this is what puts the 'leafy' edges on the main background (the page background (the flowers) is a large jpg fixed to the bottom center of the window, the two are seporate for 2 reasons. firstly the 'leaves' are a just a 2 colour gif, and the 'flowers' can be compressed Jpeg. Also the 'leaves' will scroll with the page while the 'flowers' remain static in the background).
    I can do a 'normal' footer but having to put it within the #main-cent div makes my usual method not work.
    Thanks in advance for any new ideas on how to achive this.

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

    Couldn't be simpler

    Just add position:relative to the main container then the footer stays at the bottom of that and not the window.

    Code:
    #main-cent {
     margin-right: auto;/*centres in compliant browsers*/
     margin-left: auto;/* " " */ 
     width: 780px; /*An auto centering layer, width must be assigned*/
     min-height: 100%; /* Compliant browser height, This will fill entire browser window height */
     background:  url(http://www.designed4hits.com/dev/wil.../bgnd-tile.gif) repeat-y center;
     clear:both; 
     text-align: left;/*text align must be declared in all items due to 'text-align: center;' being in the body tag*/
    position:relative;
    }
    Also increase your clearfooter divs height by about 20px to stop the text from sliding under the footer.

    Paul


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
  •