Grow your CSS skills. Land your dream job.

Why is the sidebar hiding behind the content?

  • # August 11, 2012 at 5:48 pm

    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.

    # August 11, 2012 at 6:27 pm

    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.

    # August 11, 2012 at 6:27 pm

    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.

    # August 16, 2012 at 3:06 am

    @WolfCry911 – thanks for the explanation! I ended up sticking with the overflow:hidden method and everything seems to be working great.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".