#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.
#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.
Indeed you will also have to add
overflow:hidden;to the #page container as a way of clearfixing it, because now both elements in it are floated.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.