Clear inside div A is clearing the float of div B, which is outside of div A

Question

This is a problem I've had several times when trying to create layouts with a sidebar.

I made an example here: http://samutz.com/div.html

#content has stuff inside it that needs to float and then clear within #content only. But when I try to clear inside #content, it clears the #sidebar's float as well, despite #sidebar being outside of #content.

Answer 1

Option A:

1. Remove clear:both from #cleared
2. Wrap #floating inside another div, give the new div overflow:hidden; zoom:1;

If this messes up #content text, put the text inside this new div:

http://medero.org/clear2.html

Explanation for overflow technique: http://work.arounds.org/clearing-floats/

Option B:

You can also absolutely position the sidebar but you might have to mess with min-heights if it becomes long.

Extra:

If you need to contain the sidebar with your main wrapper:

http://medero.org/clear3.html