Why is the sidebar hiding behind the content?

[Jeremy Englert]

http://goo.gl/UqO2h

#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.

[Senff]

Floating the sidebar to the right is not bad practice, it’s actually what you’ll need to do here. Or float it left, either.

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.

[wolfcry911]

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.

[Author]

Posts