Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS wordpress sidebars problems

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #23400
    Towers
    Member

    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)

    #50736
    Cotton
    Member

    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

    #50737
    Towers
    Member

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

    #50722
    Towers
    Member
    "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 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.