WordPress.org

Ready to get started?Download WordPress

Forums

Kubrick's sidebar to left side (2 posts)

  1. Marius83
    Member
    Posted 9 years ago #

    Hi everyone,

    this seems to be a great issue for several WP users. How can i get the sidebar on the left side?

    I'm coding on this website:
    http://www.landshut.org/bnla01/members/kaeos/comtreff/

    and actually the sidebar is on the left side, once it looks good in IE and then it looks good in FF. But what can i do to make a standard look in IE and FF?

    I'm using this code:

    ---

    #sidebar
    {
    padding: 10px 0 20px 0;
    margin-right: 545px;
    width: 190px;
    }

    ---

    .narrowcolumn {
    float: right;
    padding: 0 0 0px 10px;
    margin-right: 38px;
    width: 450px;
    }

    ---

    Thanks for every answer and hint.

    Marius

  2. Lorelle
    Member
    Posted 9 years ago #

    Looks like you have already figured it out when I viewed your site.

    margin-right: 545px;

    What do you think that means? It means give the sidebar a HUGE margin on the right, but that's not how to do it.

    It's not easy. It's much easier to either try a theme with the sidebar on the left and then change it to match your needs or copy their "structure" code from their style.css.

    In CSS, you can't just move or position one thing and expect everything else to shuffle around. You have to change everything.

    You have to adjust the following:

    body
    page
    header
    content
    narrowcolumn
    sidebar (or menu)
    footer

    If you are using Firefox with the Web Developer Add on (get it now if not!), choose OUTLINE > BLOCK LEVEL ITEMS and you will suddenly see boxes all around the different "containers" on your page. You got to "move those lines".

    Look for content that is near to the top of one of the lines that you want to move and then view the source (View Source) and find that content. Look for an ID or CLASS and that is your style reference to look up in your style.css that needs changing.

    Here are some more resources:
    Finding Your CSS Styles
    Codex - CSS Fixing Browser Bugs
    Codex - CSS Troubleshooting
    Positioniseverything
    Position is Everything's 3 Complex Column - Perched on a Lily Pad
    Position is Everything Piefecta Rigid 3-Column Layout
    WordPress Design Sandbox Article
    Working On CSS and the WordPress Theme (using a sandbox)

Topic Closed

This topic has been closed to new replies.

About this Topic