CSS child clearing parent float

css, css-float, html

Solution

If you add `overflow:auto;` to `.content` that should see you right.

Problem

I have a two-column layout, sidebar on the left, content on the right. So I float the sidebar left, and give the content on the right a margin. All is fine and well... Until, a child element of the content has a clear applied to it, it jumps below the sidebar. Is there a way to make children element only float and clear within it's parent container? As a picture is worth 1000 words, here's a JSFiddle: http://jsfiddle.net/qRYYm/1/

Original source