Need something like float:bottom

Hi,
I have divided my webpages to three parts. Header, content and footer. In content I have table that shows some data, this data has size of 1-1000 lines and I am not able to split it to more pages.
My problem is with displaying footer part. I have two different cases that needs different CSS markup. At first the content table contains just small data (eg. 2 rows). And I want the footer to be at the bottom of the browser page. I do this by adding position:absolute with 0px from left bottom corner. This has worked perfect until the data in the content part owerflow the page. Then this data overflow the footer.
And this is the second case when I have large data in the content that overflows the normal browser page. When this happens I want the footer to be at the end of the content. This case I can resolve by adding position:relative with 0px from the content.
But I am not able to resolve this two cases by one CSS markup. What I need is to add to footer CSS something like float:bottom, but this markup unfortunately does not exist.
Please have you any idea how to solve this problem.

Thanks for any advice
Milan

P.S. sorry for my english

 

If you're floating content, it may be because you haven't cleared your floats. It would be easier for us to analyze the problem if you could provide a URL, but try adding this to your footer and see if it helps:

div#footer { clear; both; }

 

What you can do is add a margin-bottom:Xpx to the content div, where X is the size of your footer. That should prevent your content from running into your footer, hopefully.

-Bryan

 

While that would work in theory, it would probably crash when someone had a font-size larger than the default set in their browser's preferences unfortunately. Accessibility is a pain sometimes.

 

But you can state the margin in ems. It may be safer to use bottom padding, as Opera and IE both have issues with a bottom margin that abuts the bottom of the viewport.

 

Try not to use positioning in your layout if it's not really needed..
Use floats for complex layouts..but in your case you said it's just a header then content then footer so you don't even need floats or positioning. Margins can be used for adding gaps you need. If you don't add positioning or floats, div's automatically appear one below another..

 

Have you looked at min-height (with IE6 hack) for the content container?

 

clear should work...did you fix it?

 

try to post your code here so that all can see it..