#Sidebar and #content are in different divs (but inside the same container, #page), but for some reason sidebar is sliding behind #content. Am I missing something here? As you can see, the sidebar also breaks up very weirdly, some of it going behind the content while some of it drops below.
I was able to get it to work by floating the #sidebar right and adding a overflow:hidden to the #page container – but that seems like more of a work around than the correct way to do it.
The page is rendering correctly, and your fix is the correct way to accomplish your goal.
The #content is floating left; beacuse it’s a float it’s removed from the document flow. Everything is fine so far. Then the #sidebar is rendered – it starts just below the slideshow in document flow (now that #content is no longer in flow). However, the #sidebar inline boxes are affected by the float, so they drop down below the #content (you can put borders on the two to better see what’s happening). There is no reason for the #sidebar to be ‘pushed’ to the right because the #content.
So, you could float the #sidebar (either right or left) to put it into place, but then the parent will collapse – floats are allowed to ‘hang’ outside their parent. And you found one method of containing the floats – adding overflow: hidden; to the parent.