IE/Firefox Left Float Knockdown

[TymArtist]

Hey all. I recently built a site using ems in hopes of getting a fully scalable site, and it almost works perfectly. The only problem I seem to be having is that I've got two main floats - a left and a right. These are enclosed in a container (although that fact is negligible, since the problem happens with or without). Upon using the enlarge feature in either browser, the site looks great. When I decrease the size, the left side navigation gets knocked down under the body.

The code is structured so that the main content comes in the code before the menu, then the content floats right and menu floats left - I've had it the other way too. The container has a width on it, and I've also tried width on the body but that doesn't seem to do anything. It's almost like the content tries to run too far over and knocks the menu down, but i just want it to stay in place!

Please help! The site is almost ready to launch and this is my last real bug fix :)

[alias]

If you DECREASE the font size and everything collapses - then I'd say you're probably using some em values in margins or paddings - that's the only idea I've got.

[Fotiman]

That is the exact behaviour of a float. The spec [w3.org] states:

"If there isn't enough horizontal room for the float, it is shifted downward until either it fits or there are no more floats present."

The only thing I can think of to prevent that would be to give your containing block a fixed width that is large enough to hold both items side by side.