As I work on the design of my website , I find myself in need of CSS assistance. If your current screen resolution doesn't highlight the issue, try adjusting the window size so that the 2-column layout in the sample would cause the footer to shift-- easily accomplished by dragging the bottom edge of your browser window.
This problem is quite frustrating. The content fails to push the footer down as expected, and worse still, there is no scroll bar in sight.
When you resize the window horizontally, the second floated column div drops down and floods the footer.
However, if you shrink the window width, eventually the column content starts to push the footer down ... which is the correct behavior. But the initial flooding is something I can't seem to resolve.
I attempted a relatively fluid layout based on this reference: http://www.alistapart.com/articles/fluidgrids; for the footer code, I used . While other methods are available online, I selected this approach because I desire normal content with a constant footer stuck at the bottom of the page. Any suggestions?
Thanks!
Edit: I implemented the first suggestion by adding clear:both in the #push section, and introduced position:relative for #wrapper, #push, and #footer. The footer now appears below the initial screen position giving a nice "hidden footer effect."
I am pleased with this solution -- however, at extremely narrow screen resolutions, the footer overlaps the content at the bottom. How do I prevent this from happening???