Help wth positioning a footer directly below a <div>

Discussion in 'HTML' started by Ranpha, Apr 3, 2005.

  1. Ranpha

    Ranpha Guest

    first, here is a link to an example of my problem:
    http://whittierpunks.com/test/

    I have a main <div> that I would like to place a footer directly
    below of, with the same width as the main <div>. I can't seem to find
    the right code to do it. I tried placing the footer within the main
    <div>, but that also contains three other <div>'s, which get covered
    up by the footer as they expand. I'd like to have it sit directly
    below, as if floated-left? perhaps, but I think I'm missing something.
    What is the best way to do this? I've referred a lot to the page
    on footers at alistapart.com, but I'm still trying to implement that
    advice with my design.
    Also, the example with the footer within the <div>, IE doesnt show
    the footer at all, FF and Opera do. I tried using z-index 1; but I
    think I'm missing something else because it has no effect. Please
    take a look at my .css. Though I dont have a clear idea of where i go
    wrong, I know enough to see it's fatty and redundant. From the
    general look of the page, if you know of a better way to implement it,
    I'd be grateful.
     
    Ranpha, Apr 3, 2005
    #1
    1. Advertising

  2. Ranpha

    Robert Guest

    On Sun, 03 Apr 2005 11:14:53 +0000, Ranpha wrote:

    > first, here is a link to an example of my problem:
    > http://whittierpunks.com/test/
    >
    > I have a main <div> that I would like to place a footer directly
    > below of, with the same width as the main <div>.


    [...]

    Place the footer div inthe conatiner below the right div, remove the
    footer absolute positioning from the css and add

    clear:both

    instead.

    hth

    --
    Robert
    http://brightonfixedodds.net
     
    Robert, Apr 3, 2005
    #2
    1. Advertising

  3. Ranpha

    APT Guest

    "Ranpha" <> wrote in message
    news:...
    > first, here is a link to an example of my problem:
    > http://whittierpunks.com/test/
    >
    > I have a main <div> that I would like to place a footer directly
    > below of, with the same width as the main <div>. I can't seem to find
    > the right code to do it. I tried placing the footer within the main
    > <div>, but that also contains three other <div>'s, which get covered
    > up by the footer as they expand. I'd like to have it sit directly
    > below, as if floated-left? perhaps, but I think I'm missing something.
    > What is the best way to do this? I've referred a lot to the page
    > on footers at alistapart.com, but I'm still trying to implement that
    > advice with my design.
    > Also, the example with the footer within the <div>, IE doesnt show
    > the footer at all, FF and Opera do. I tried using z-index 1; but I
    > think I'm missing something else because it has no effect. Please
    > take a look at my .css. Though I dont have a clear idea of where i go
    > wrong, I know enough to see it's fatty and redundant. From the
    > general look of the page, if you know of a better way to implement it,
    > I'd be grateful.



    I have this same frustration all the time. I know there is a way to do it
    in relative positioning, but have yet to figure it out.

    I would put an absloute height ( height: 400px;)on container, and then
    absolute position the footer.

    The only problem with this is that when the content goes past the absolute
    height then you have to use overflow.

    Hope it helps.
     
    APT, Apr 3, 2005
    #3
  4. Ranpha

    Ranpha Guest

    Remember that time, on Sun, 03 Apr 2005 21:28:04 GMT, Robert
    <> had prophecied:

    >On Sun, 03 Apr 2005 11:14:53 +0000, Ranpha wrote:
    >
    >> first, here is a link to an example of my problem:
    >> http://whittierpunks.com/test/
    >>
    >> I have a main <div> that I would like to place a footer directly
    >> below of, with the same width as the main <div>.

    >
    >[...]
    >
    >Place the footer div inthe conatiner below the right div, remove the
    >footer absolute positioning from the css and add
    >
    >clear:both
    >
    >instead.
    >
    >hth


    Got it! Robert. Wasn't aware of the clear property...exactly what I
    needed. Thanks.
     
    Ranpha, Apr 4, 2005
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Tamlyn Rhodes
    Replies:
    3
    Views:
    1,005
    Andy Dingley
    Feb 26, 2004
  2. KindOBlue
    Replies:
    0
    Views:
    406
    KindOBlue
    Aug 8, 2004
  3. John

    need help wth a database

    John, Jan 1, 2007, in forum: ASP .Net
    Replies:
    3
    Views:
    334
  4. Henrik
    Replies:
    1
    Views:
    441
    Ken Cox [Microsoft MVP]
    Jul 6, 2006
  5. kiran
    Replies:
    12
    Views:
    1,152
    Scott Sauyet
    Dec 7, 2011
Loading...

Share This Page