I’ve been working on a fully fluid-width, XHTML Strict, table-less, three column child theme for WordPress’ Twenty Ten default theme…
And in the process, discovered a bottom margin bug!
I submitted the bug to a Trac ticket HERE and also documented the fix that would squash the bug flat and make Twenty Ten render the way it was supposed to which I will share here in my blog.
The Bug (in short):
The margin-bottom: 20px that is applied to the footer div triggers a well known CSS bug causing the 20px margin to be applied to the adjoining/bottom margin-touching wrapper div instead of the footer div.
That bottom margin you see at the bottom of the page where the end of the content wrapper should be touching the bottom of the screen?
That’s the bug.
The Fix (in short):
To correctly apply the 20px margin-bottom to the footer div and not accidentally to the wrapper div, the wrapper div needs to be given a 1px padding-bottom and the footer div needs to be given a 19px margin-bottom.
The padding applied to the wrapper where it touches the bottom of the footer container will trigger the margin-bottom to be rendered correctly for the footer and not the wrapper as the padding will add some ’separation’ between the two containers.
Another fix is to add a 1px border to the bottom of the wrapper and leave the 20px margin-bottom on the footer.
The border adds ‘content’ to the bottom of the wrapper which triggers the margin-bottom for the footer to be rendered correctly.
Why the Bug Happens:
























