I have a slight issue with a site I am developing. I have body content colliding with a footer div, getting partially hidden behind it, and pushing out the footer content.
I’ve managed to duplicate these symptoms on only Chrome/Win, Safari/Win, and Safari/Mac.
You can view the page here: http://www.pacarmy.ca/blog2.php
I have validated the HTML, and the same page tests fine in IE9/win, FF/win, and opera/win.
Googling hasn’t helped me, and the closest thread on Stackoverflow I’ve found wwas:
css chrome issue at footer cross browsers (IE,FF,Chrome)
Which isn’t really the issue at all.
Can anyone advise? Speculate? Anything? 🙂
Thanks.
Your post is floated and parent elements never expand to contain floated elements so you need to “clear your floats”. One way to do this is to add ‘overflow:auto’ to your section element. That causes the parent to expand on overflowing elements. However, I did not check to see if that’s the best place or method to use for when you add more posts or elements on that page.
You can Google or search on SO for “clear floats” for more info and methods.