Drop Down menu breaks layout in Firefox

[calebih]

Here is the link in question:

http://www.redchip.com/testing.asp

It is simply styled with floating divs.

Two floating divs are in a container, and they look fine, until I
insert dropdown menu in the left div, then the right div gets pushed
down as if the left div is too big or has clear:right applied to it.

When I take out the dropdown menu, it behaves normally.

This only happens in firefox. I tested with Safari and IE7, and it
behaves fine.

I've tried many things, but I just can't get it to work in FF. help!

[Ben C]

On 2007-04-24, ca*****@gmail.com <ca*****@gmail.comwrote:

Here is the link in question:

http://www.redchip.com/testing.asp

It is simply styled with floating divs.

Two floating divs are in a container, and they look fine, until I
insert dropdown menu in the left div, then the right div gets pushed
down as if the left div is too big or has clear:right applied to it.

When I take out the dropdown menu, it behaves normally.

Yes, you mean the <selectelement. If you remove all the <option>s from
the <selectelement it also works.

This only happens in firefox. I tested with Safari and IE7, and it
behaves fine.

It works properly in Opera too.

I've tried many things, but I just can't get it to work in FF. help!

It looks like a bug in Firefox. There is no other rational explanation
for this behaviour.

One workaround that seems to work is move rightArea in the source so
it's before mainArea and make it float: right instead of float: left.
You can then even get rid of float: left on mainArea altogether if you
want.

That way FF puts rightArea on the right before it gets confused by the
<optionelements.