Floating menus disturbing my floating content

Question

In my HTML page I have a total of 3 menus :

• 1 on the left
• 1 on the right
• 1 in the middle above the content

The left and right menus are floating, and the middle content and menu have a margin equals to the width of the menus to center it.

This is working fine. However, when I insert some other floating content in my content block and I stop it with clear: both;, the next content I add is added below the side menu with the largest height.

Here is a simple fiddle that shows the issue : http://jsfiddle.net/Xy9Ry/

As you can see, the other content text is displayed below the left menu instead of being displayed just below the floating content.

What can I do to solve this problem ?

Answer 1

Add overflow: hidden; to .content

JSFiddle Demo

w3c Wiki article on Overflow

overflow: auto; also works