Twenty Ten Bottom Margin Bug – A Fix!
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:
If two adjoining containers share a common side (in this case, bottom of the footer and the bottom of the wrapper) and there is no padding or border to ’separate’ them (padding) or ‘add content’ (a border would ‘add content’ in this case) aside from a declared margin that affects that shared side (in this case, the footer’s margin), a bug is triggered where:
The margin applied to one container can be ‘doubled’ or ‘pushed out’ to the other container.
In other words, depending on how you see it, the margin either ‘doubles’ or gets ‘pushed out’ owing to this particular quirk of CSS.
Not surprisingly, this is related to the collapsing margins bug as well where two adjoining margins collapse into one margin.
Final Thoughts:
I know a lot of people don’t mind and/or don’t care about that bottom margin, but for those of you who like your footers to be stuck to the ‘foot’ of your viewing screen, this bug fix is for you.
Cheers and a big thank you to the WordPress team for such an awesome and versatile theme! 
~ EMG
2 Responses to “Twenty Ten Bottom Margin Bug – A Fix!”
This design is wicked! You certainly know how to keep a reader amused. Between your wit and your videos, I was almost moved to start my own blog (well, almost…HaHa!) Wonderful job. I really loved what you had to say, and more than that, how you presented it. Too cool!
Amazing resource! I’ve just added it to vavorites.