WordPress.org

Support

Support » How-To and Troubleshooting » How to Move a Sidebar?

How to Move a Sidebar?

Viewing 7 replies - 1 through 7 (of 7 total)
  • This depends on your theme. I would suggest you take a look for a theme that has the sidebar on the side it pleases you most.

    Another thing would be to slightly modify your themes CSS sothat the sidebar simply displays on the other side. Which steps do be done varies from theme to theme but normally only some lines of CSS code need to be edited.

    Bhavadasa
    Member

    @bhavadasa

    Thank you hakre,

    Ok, I am able to find were the codes are now, and am able to move the columns around, but I just can’t get the main column into the center, with the other two on the sides… Any suggestions?

    Here is the address: http://www.iskconphx.org

    you want one column on each side instead of both on one side? i though you said you figured out how to move them around…

    Bhavadasa
    Member

    @bhavadasa

    boober,

    Yes, I want one column on each side instead of both on one side. At least I now know were the column codes are, but I can’t figure out how do place the columns where I want them.

    Here is code:

    /* Content */

    #content {
    width: 900px;
    margin: 0 auto;
    }

    #colOne {
    float:left;
    width: 490px;
    }

    .commentby{
    background:url(images/comment.gif) no-repeat;
    padding:0 0 0 5px;
    padding-left:20px;
    }

    .postedby{
    background:url(images/page.gif) no-repeat;
    padding:0 0 0 5px;
    padding-left:20px;
    }

    #content .info span.page {background:url(images/page.gif) 0 50% no-repeat;}
    #content .info span.cat {background:url(images/comment.gif) 0 50% no-repeat;}

    #colOne img {
    padding: 5px;
    border: none;
    margin: 5px;
    }

    #colTwo {
    float: right;
    width: 175px;
    padding: 0 5px 0 5px;
    }

    #colTwo h3 {
    margin-top: 10px;
    }

    #colThree {
    float: right;
    width: 175px;
    padding: 0 5px 0 5px;
    }

    As a quick shoot, try the following:

    #colOne {
    float:left;
    width: 490px;
    position: relative;
    left:190px;
    }

    #colThree {
    float: right;
    width: 175px;
    padding: 0 5px 0 5px;
    <b>position: relative;
    left:-540px;</b>
    }

    Should work in any CSS compliant browser. Anyway your document structure does not leave too much opportunities to handle it robust. Try to find a YAML (the CSS Framework) based three column theme, that should do the trick properly.

    MKatLarge
    Member

    @mkatlarge

    I’m not real good at CSS, but could you not make one of the columns float “center”? Is that possible?

    I think the only way to do this and keep your sanity is to float two column against each other, and make one of them wider than the other. Then WITHIN the wide column you float two columns.

    The CSS is something like this:

    #colmn3leftcontain {
    float: left;
    width: 500px;
    margin: 0;
    padding: 0;
    }
    #colmn3left {
    float: left;
    width: 225px;
    margin: 0;
    padding: 0;

    }

    #colmn3mid {
    float: right;
    width: 225px;
    margin: 0;
    padding: 0;

    }
    #colmn3right {
    float: right;
    width: 225px;
    margin: 0;
    padding: 0;

    }

    The HTML:
    <div id=”contentmain”>

    <div id=”colmn3leftcontain”>
    <div id=”colmn3left”>
    </div> <!–colmn3left–>
    <div id=”colmn3mid”>
    </div> <!–colmn3mid–>
    </div> <!–colmn3leftcontain–>

    <div id=”colmn3right”>
    </div> <!–colmn3right–>
    </div> <!–contentmain–>

    I’m not sure if this helps, but it has worked for me.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘How to Move a Sidebar?’ is closed to new replies.