Yesterday I came accross a slight problem when adding a Dropdown Menu to a site.

I had 3 divs – one to the left, one to the middle, and one to the right.

The left and middle div both had float:left in their style, while the right div had float: right to its style.

I tested the site and all looked great… until I added a Dropdown Menu to the middle div and Firefox starts playing up.

Basically, what Firefox did was keep the right div floating to the right, but underneath the middle div. This wasn’t what I wanted at all, and after about half an hour of fiddling with the code I managed to fix it.

The Solution

All I did was cut the right div out of the code and placed it before the middle div. It still had the same style attributes, all that was needed was a quick swap. And hey presto! It worked!

The CSS

#left {float: left;}
#middle {float: left;}
#right {float: right;}

The HTML

Change this:

<div id="left">Left Content</div>
<div id="middle">Middle Content</div>
<div id="right">Right Content</div>

To this:

<div id="left">Left Content</div>
<div id="right">Right Content</div>
<div id="middle">Middle Content</div>