I'm pretty CSS-savvy, but I'm seeing some odd float/clear behavior. I have it working, but I'm not entirely sure why and am looking for an explanation.
I have a 2 column layout - sidebar and content - where the sidebar is floated but the content is not; the content div has a left margin applied to it.
If I use
clear:both on any elements in the content div, the element unexpectedly drops below the height of the sidebar div (unexpectedly because the floated sidebar isn't directly affecting the positioning of items inside the content area).
What is even more unexpected, is that when I add
overflow:auto to the content div, the problem goes away. (I found the solution here)
Can someone explain:
clear:bothwould cause an element to clear a floated element that isn't directly affecting its position.
overflow:autoon the parent element fixes the issue.