Help wth positioning a footer directly below a <div>

[Ranpha]

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.

 

[Robert]

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

 

[APT]

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: 400pxon 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.

 

[Ranpha]

Remember that time, on Sun, 03 Apr 2005 21:28:04 GMT, Robert

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.