Floating Footer using divs

First attempt at tableless design...

[khaustic]

Up until, I've been using tables for layout purposes on all our websites here at rainstormconsulting... Typically, our layouts follow the same pattern: A 780px top/left justified header, a left navigation bar, and foot centered beneath the body of the page. <Eeek!> Some of these sites actually have a top navbar and images along the left border, but the following question still applies.

Using divs, I've managed to design an entire page with the above layout with no difficulties except when it come to the footer. What I need to do with the footer is make sure that it stays at about 50 pixels below the last line in the body, but also never rises above the bottom of the left navbar. (In other words, if there's only one or two sentences in the body of the page, I don't want the footer all the way up in the middle of the whole page). I've been searching for the answer to this problem for about 4 hours now and haven't gotten any close to a solution. Any help anyone could give would be greatly appreciated.

Thanks,
Chad

[edited by: Nick_W at 7:52 pm (utc) on Oct. 8, 2003]
[edit reason] no urls please / thanks! [/edit]

[dillonstars]

I am assuming that what you want is for the footer to go up and down with the content (on the right) but only ever up as far as the navigation (on the left).

I think this is one thing that is all but impossible to do with straight CSS (but i'd be very happy to find out I am wrong).

I have had to rethink my footers so that i dont need to do this.

The only way i can see to do it would be to

position: absolute

the footer on each page, but i understand that if you are using dreamweaver templates etc to design you page this is not a good solution.

You might be able to put the footer underneath the content column and give the div a minimum height using

min-height: 500px;

but I have never tried it so can't vouch for that.

[ronin]

Surely if the left navigation bar is floating on the left, all you need to do is apply

clear:left;

to the bottom div to make sure that it doesn't rise above the bottom of the navbar div?

[TGecho]

If your nav is a fixed height and you're not using floats, something along the lines of might work

#contents {
height : 400px; /*approx height of nav*/
}
body>#contents { /*direct parent of #contents*/
height : auto;
min-height : 400px;
}

IE treats height the same as other browsers treat min-height, it makes something at least that height, but will stretch if there's more.

IE doesn't understand the parent>child selector, and so ignores the rule which resets the div's hight to auto for SC browsers.

Note: I haven't had a chance to test this extensively, so use at your own risk.