Firefox CSS Work Around

We all love firefox, right? If your answer to that question is anything other than yes, then please let the door hit you in the ass on your way offsite. Unfortunately I discovered a CSS bug in firefox 1.0, and 1.5, in both the Linux and Mac versions (I assume it is also a bug in Windows firefox, but havn't had the software or desire to test it). Basically the problem is that sometimes (havn't been able to work out the exact circumstances of the bug) if you create a div with a width of 100%, the div itself actually is 100% wide, but all the attributes of the div only span as far as the content of the div. For example, lets say I created a title bar for a page like so:


<div style="float:left; background-color:#FFFFFF; border-bottom:2px solid #EEEEEE; width:100%">Hello World</div>


The background color and bottom border would only be as wide as the text "Hello World" in the div. Kind of a pain. Well as a simple work around to this problem you can add a span or a div with a blank space in it floating on the opposite side of the div. So for example, the above div has float left, so to rectify the problem we could do this:


<div style="float:left; background-color:#FFFFFF; border-bottom:2px solid #EEEEEE; width:100%">Hello World<span style="float:right;"> </span></div>

<!-- or -->

<div style="float:left; background-color:#FFFFFF; border-bottom:2px solid #EEEEEE; width:100%">Hello World<div style="float:right;"> </div></div>


This CSS bug doesn't happen with IE or Safari - I know, it doesn't make sense, a CSS error in firefox that doesn't happen in IE, but its true, I swear - and hopefully the crack firefox crew will get on fixing it and you won't have to use this fix sometime in the very near future.