You may have run into this problem, you may have not. But I found an acceptable workaround to this particular problem.

Here’s the scenario.

So I have a two column layout where my navigation list (red) is floated to the left and my main content is on the right. In my main content I have another navigation list (gray) that floats to the left. And the text in my main content now wraps around. I really want my main content text below the gray navigation to still to the right of red navigation.

If I use a simply use a clear:left on the container around my content text, I will have it all the way below the red navigation list. This is expected behavior as clear:left means make sure there is no elements that are floated to the left of me. It however is not the ideal behavior I wanted.

In IE & Firefox (possibly other browsers) there is a *bug* that if you wrap the floating element in a fieldset, the fieldset acts as a container that stretches as far as the float elements.

This however really isn’t a good workaround because it uses a *bug* in both browsers and it DOES NOT work in browsers like safari. So I came up with a better solution today.

Float the ul element to the right with its width set to 100%, and then clear the container around the text to the right. This obviously only works if you don’t have anything above the text that’s also floated to the right.

Here’s the final result.