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.