SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    May 2008
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Div footer alignment in IE and FF

    I'm currently trying to rebuild an old website that had to be taken down because it was hacked. So I thought it would be a good opportunity to redo the templates, etc. (The whole site needs restructuring, anyway.)

    I want a header, a left hand menu, content and then a footer with text that is centred to the width of the screen, not the width of the content.

    My div page is as follows:

    body {
    margin: 0px;
    padding: 0px;
    background-color: #001166;
    }

    #header {
    background: #001166;
    background-color: #001166;
    text-align: center;
    height: 66px;
    padding-top: 33px;
    padding-bottom: 33px;
    }

    #menu {
    background: #001166;
    float: left;
    height: 100%;
    width: 18%;
    padding-left: 10px;
    }

    #content {
    background: #ffffff;
    float: right;
    width: 80%;
    padding-top: 50px;
    padding-bottom: 55px;
    padding-left: 5px;
    }

    #footer {
    background: #001166;
    padding: 0px;
    clear: none;
    width: 100%;
    text-align: center;
    height: 50px;
    }

    It works exactly as I want in IE7, but in Firefox, the footer content ends up in the menu content, rather than separated from it.

    I've been going round in circles for a while now, so I can't remember what I had before. It used to be fine in Firefox, but in IE the footer would be at the bottom of the screen, and when you scrolled down, it went up. (As in, it didn't stay at the bottom of the screen always.) That may have been when I was using a container div. I know at one point I managed to get the same bug - the set at bottom of first screen footer - on Firefox as well.

    Any suggestions welcome.

  2. #2
    SitePoint Addict Newviewit's Avatar
    Join Date
    Apr 2008
    Posts
    241
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    look into 'clear' you footer... good practice to get into

    also look into 'positioning' and 'float'

    Will save you lots of headaches in the future on more complicated sites.

  3. #3
    SitePoint Member
    Join Date
    May 2008
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I had forgotten "float", thanks. It's there in the others, but not the footer.
    I've added float: right; and everything looks hunky-dory again.



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
  •