WordPress.org

Ready to get started?Download WordPress

Forums

How to Move a Sidebar? (8 posts)

  1. Bhavadasa
    Member
    Posted 6 years ago #

    Is it possible to move a sidebar from one side to the other...how?

  2. hakre
    Member
    Posted 6 years ago #

    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.

  3. Bhavadasa
    Member
    Posted 6 years ago #

    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

  4. boober
    Member
    Posted 6 years ago #

    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...

  5. Bhavadasa
    Member
    Posted 6 years ago #

    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;
    }

  6. hakre
    Member
    Posted 6 years ago #

    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.

  7. MKatLarge
    Member
    Posted 6 years ago #

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

  8. mechx1
    Member
    Posted 6 years ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.