Skip to:
Content
Pages
Categories
Search
Top
Bottom

Adding a right sidebar at front page

  • Hi,

    How do I ad a right sidebar (div) at the front page?

    Adding and changing the css into this doesnt help (bold is added/changed):

    /* Front Page

    =================================== */

    #front-page #hottags {

    float: left;

    width: 150px;

    overflow-x: hidden;

    }

    #front-page #rightbar {

    float: right;

    width: 150px;

    overflow-x: hidden;

    }

    #front-page #discussions {

    margin-left: 170px;

    margin-right: -20px;

    width: 440px;

    }

    .frontpageheatmap {

    font-weight: normal;

    line-height: 30px;

    padding-bottom: 10px;

    }

    thx

Viewing 8 replies - 1 through 8 (of 8 total)
  • Try something like:

    #front-page #discussions {

    margin-left: 170px;

    margin-right: -20px;

    width: 420px;

    }

    #front-page #rightbar {

    margin-left: 590px;

    width: 150px;

    margin-right: -20px;

    }

    I haven’t tested this, but it would be easier to just keep moving them to the right I think.

    Trent

    Doesnt work, the right bar is still displayed underneeth the discussion div even when aligned to the right. I even made the discussion div very small but it still wont “move up”…

    The easiest thing to do would be to find any site (WP or otherwise) that has 3 columns and take a look at the CSS to find out how they went about doing it.

    Trent

    Got this now:

    #leftbar {

    float: left;

    width: 150px;

    overflow-x: hidden;

    }

    #discussions {

    margin-left: 170px;

    width: 420px;

    }

    #rightbar {

    margin-left: 610px;

    width: 150px;

    overflow-x: hidden;

    }

    Total width = 760 px just like the header. This should work, but the right column is still displayed underneeth the discussion div (though the rightbar is aligned to the right and there is enough space left for the rightbar to move up :S


    ardentfrost
    Member

    @ardentfrost

    add position: absolute; in there

    Okay almost there. I now have:

    #hottags {

    float: left;

    width: 150px;

    overflow-x: hidden;

    position: absolute;

    }

    #discussions {

    margin-left: 170px;

    width: 420px;

    position: absolute;

    }

    #rightbar {

    margin-left: 610px;

    width: 150px;

    overflow-x: hidden;

    position: absolute;

    }

    The right bar is alligned properly now, BUT the footer is moved up also. So the footer crosses the 3 collumns. All is mixed now, how to get the footer back down again?

    Thx

    Any 1?


    peiqinglong
    Member

    @peiqinglong

    To the footer, try adding clear: both in your CSS.

Viewing 8 replies - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.