CSS footer positioning problems

Discussion in 'Web Design and Development' started by Mal, Apr 18, 2007.

  1. Mal macrumors 603

    Mal

    Joined:
    Jan 6, 2002
    Location:
    Orlando
    #1
    I think I'm just going about this the wrong way, but I can't think of how to do it. It's probably really obvious, so I'd appreciate a point in the right direction at least.

    I have a web page I'm designing for a class project that has a header and footer, along with content and a sidebar, that are all positioned with css. Link here:

    http://sulley.dm.ucf.edu/~jwalker/dig4716/project4/
    CSS file: http://sulley.dm.ucf.edu/~jwalker/dig4716/project4/p2style.css

    I had been trying to position them fluidly, but gave up on that for the current incarnation, and just went for the static approach, but I think I need to kinda combine the options. Basically, my problem right now is getting my footer to position right at the bottom of the page, underneath the columns that are there. I don't want to simply absolutely position it there, though, because on some pages, the content column will have to be longer, and I don't want to have to set up additional id's or anything, but I can't get it to work with relative positioning. Is it because everything else is relative positioned?

    BTW, please don't make fun of the actual design, I hate it but it's not at a point where I can go change anything, nor do I need to for the project, so I'm just accepting that it's ugly. I just have to make it work now, is all.

    jW
     
  2. noelister macrumors 6502

    Joined:
    Jan 15, 2005
    #2
    Mal,

    This is just a suggestion --

    Try putting the footer div inside the container div you have. Then in your CSS file try

    .footer {
    float:left;
    clear: both;
    }

    This is a start and hopefully this will get the footer where you will want it.
     
  3. Mal thread starter macrumors 603

    Mal

    Joined:
    Jan 6, 2002
    Location:
    Orlando
    #3
    I tried that before, but without the float, and it still showed up at the top. Just tried the float, and now it just disappears behind the top navigation bar. All it appears to have done is change the level it appears on, not the position. Do I need to change some of the other items to position: relative?

    jW
     
  4. Dave the Great macrumors regular

    Joined:
    Jan 27, 2004
    #4
    I didn't spend a lot of time, but this seems to work:

    put:
    padding-bottom: 110%;

    in:
    .container

    take out:

    left: 10px;
    top: -2px;

    from:

    .footer
     
  5. Mal thread starter macrumors 603

    Mal

    Joined:
    Jan 6, 2002
    Location:
    Orlando
    #5
    That doesn't seem to work for me. It stretches out the content container, but the footer stays the same. This was in Firefox 2.0, btw, didn't test it in Safari (since if it doesn't work in Firefox, it's no good anyways).

    jW
     
  6. epochblue macrumors 68000

    epochblue

    Joined:
    Aug 12, 2005
    Location:
    Nashville, TN
    #6
    I think your problem is that most your page is positioned absolutely. When you use the "position: absolute" selector, those elements are pulled out of the normal flow of the page.

    Since your footer is positioned relatively, it's positioned relatively to the element that contains it and relative to the other "normally" positioned elements on the page. Since everything is absolutely positioned (why did you absolutely position everything?), the footer is rendering in the right place...relatively to the body element that contains it.

    I recommend reworking your layout. The layout itself isn't that complicated and doesn't really require the use of absolutely positioned everything. Just a suggestion, though.


    As for a push in the right direction - I'd recommend a header div, and content and sidebar div (one that's floated), and a footer that clears the float. That should get you around most of the problems you're having.

    I also think this article would be a good one for you to read.
     
  7. Mal thread starter macrumors 603

    Mal

    Joined:
    Jan 6, 2002
    Location:
    Orlando
    #7
    Thanks, epochblue, if this wasn't just a small school project and if I had time, I'd certainly do that (or never have done it this way in the first place). However, I've now figured it out (based on ya'lls suggestions, I just had to position the content div relative to make it work out), so thanks all! I'll certainly never design a page with that method again.

    jW
     
  8. epochblue macrumors 68000

    epochblue

    Joined:
    Aug 12, 2005
    Location:
    Nashville, TN
    #8
    There's nothing necessarily wrong with an absolutely positioned layout, but for the type of layout you were going for, it would have been much more flexible if you hadn't used the absolute positioning. :)
     

Share This Page