Results 1 to 5 of 5
May 9, 2005, 18:47 #1
CSS Footer not going to the bottom
I have a three column page created with div's. Using the "How do I add a footer that works well, using CSS" in the book 101 Essential Tips, tricks, & Hacks" I have placed a footer.
It all seems to work well until the ad's placed in the far left column are longer than that of any other column. Then the footer crosses over the ads. You can see the effect at www.boathousetimes.com.
Any help is greatly appreciated.
May 9, 2005, 20:34 #2
It may be due to the fact that you have the footer positioned absolutely.
It seems that absolutely positioned elements won't clear floats.
Since the footer is positioned absolute, with bottom:0, which is the bottom of it's containing div, I think you could place a clearer div at the bottom of the containing div to clear the floats, and the footer will still stick to the bottom of the div.
Or simply position the footer static or relative, and place it at the bottom of the div in the markup, and give it a clear:both.
May 9, 2005, 20:58 #3
I will try that but I was only following exactly what the book was doing and it seems to work perfectly for them. I was hoping that I just had it in the worng position or left somethig out. I will let you know how it tirns out tomorrow.
Thanks for your help.
May 10, 2005, 12:00 #4
- Join Date
- May 2005
- Suwanee GA
- 0 Post(s)
- 0 Thread(s)
This one works in Firefox and IE6
width:800px; /* width of your stage */
border-top: 1px solid #fff;
/* border = color of stage to hide it */
May 10, 2005, 14:56 #5
- Join Date
- Jan 2003
- Hampshire UK
- 182 Post(s)
- 6 Thread(s)
The problem is that you have absolutely placed your side columns (divnav and divinfo) and therefore they are removed from the flow. No amount of clearing or positionng is ever going to get the footer to take notice of these columns because they are effectively removed from the flow and don't exist as far as other elements are concerned.
You need to float the side columns and then you can clear them to bring the document flow under control.
The footer will then work because the parent div will then expand with the side content (or the main content) and the footer will maintain its absolute position at the bottom of the parent. You will of course need to ensure that the content doesn't overwrite the footer because the footer being absolutely placed will not hold up any other content. You therefore will need to pally padding bottom to the elements above of sufficient height to allow room for the footer. Or alternatively place a static element of the same height as the footer which sites under the content and holds the spavce open for the absolute footer.
If you look at the faq there is an alternative method of placing a footer and using 100% height explained in detail and numerous examples in the 3 col demo.
Hope that explains it well enough