Grow your CSS skills. Land your dream job.

wordpress sidebars problems

  • # October 25, 2008 at 2:08 pm

    so i’ve been trying to restructure a blog, but i can’t get the sidebar to float on the right like it should and i have no idea why. the closest i can get it is on the right but below all the other content.

    you can see what i am talking about on this test blog i set up right here.

    here is the css. do you guys want any other specific code to look at?

    so far i have only looked at in in FF3 on OSX, so if it looks a bit wonky in anything else i’d like to know but don’t worry about it too much. i’m focusing on getting it right for me before anyone else.

    (ignore the content of the posts)

    # October 25, 2008 at 4:27 pm

    The problem you’re having is a pretty common one and it is because you’re not floating your main content.

    If you’re floating the right side, but not the main content area you need to have your floated item above the non-floated item on the page. Normally, with most blogs with a right sidebar, both the main content area and the right sidebar are floated left, and kept in place with a container div. This way, the main content stays at the top of the document for SEO reasons, and the sidebar comes after the main content in the document.

    If the main section isn’t floated then the order should be:
    wrapper div -> sidebar div ->main content div

    Code:
    CSS
    #wrapper {width: 900px; margin: 0 auto;}
    #main {float: left; width: 600px;}
    #sidebar {float: left; width: 300px;}

    HTML/PHP

    main content

    # October 25, 2008 at 5:17 pm

    Well that wasn’t exactly it, but your post did lead me into the correct direction, so thanks!

    # October 25, 2008 at 5:45 pm

    lower the width of your main content. I would bet that the sidebar doesn’t have enough room to sit on the right of the content and that is pushing it down. add a red background color to your content and your sidebar that way you can see better where the boundaries of the content and sidebar are sitting. Then you can adjust the width accordingly. Don’t forget to clear any floated divs.

    # October 25, 2008 at 5:49 pm
    "cybershot" wrote:
    lower the width of your main content. I would bet that the sidebar doesn’t have enough room to sit on the right of the content and that is pushing it down. add a red background color to your content and your sidebar that way you can see better where the boundaries of the content and sidebar are sitting. Then you can adjust the width accordingly. Don’t forget to clear any floated divs.

    That’s basically what I did. It turned out that most of this was me not messing up floats but rather widths…

    I haven’t updated the test copy though.

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

You must be logged in to reply to this topic.

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