For this non-motorcycle related blog entry I've decided to relate a recent CSS programming issue that I came across and resolved. For all you non-programmer types, I'm sorry for posting something so unexciting and spectacular.

As all us HTML/CSS programmers know Internet Explorer is the main culprit of non-standard code interpretation and requires hacks to solve those issues. Today though I've come across a random Firefox bug that causes an especially irritating problem.

Typically when coding a 2 or more column layout that resizes vertically dynamically you would use 'float: left' for the column elements and space them accordingly using margins and padding. When floating columns you often have them floating in a <div> container so that you can center them collectively on a page, or just to keep things tidy and contained. This is where the firefox bug arises (in both Firefox 3 and 3.5). The code is as follows:


<div id="container" style="width: 800px;">
<div class="leftcolumn" style="float: left; margin: 0 40px 0 0; width: 200px;"></div>
<div class="rightcolumn" style="float: left; width: 540px;"></div>
</div>


That code will work just fine and exhibit no issues. Sometimes though you may want to add a margin at the bottom of the container <div> for spacing to a footer element. However some browsers do not show that bottom margin unless you set the container <div> to 'display: table;' So the code then looks like so:


<div id="container" style="width: 800px; margin: 0 0 20px 0; display: table;">
<div class="leftcolumn" style="float: left; margin: 0 40px 0 0; width: 200px;"></div>
<div class="rightcolumn" style="float: left; width: 540px;"></div>
</div>


While this makes your bottom margin work and the page probably looks fine in IE and Safari, this will make your page load incorrectly in Firefox (sometimes... randomly). The bug doesn't strike all the time but when it does it's especially aggravating. It will cause your 'rightcolumn' to randomly drop down below the 'leftcolumn'. This is called a "Float Drop" bug, but unlike most float drop bugs (usually seen in IE6 if you don't use a box-model hack) the page will render properly if you click the reload button in Firefox. So let me repeat: If you're using Firefox 3 or 3.5 and click on a link to load the page and see a float drop bug, but the page renders properly on a refresh... well, you're experiencing the issue I'm talking about. Set your container <div> to 'display: block;' and it should solve the problem. You'll only need to space your footer element differently--either by using a top margin, a <br>, or some other method.