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

[@trent Member 18 years, 1 month ago]

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

[@null Member 18 years, 1 month ago]

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”…

[@trent Member 18 years, 1 month ago]

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

[@null Member 18 years, 1 month ago]

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 18 years, 1 month ago]

add position: absolute; in there

[@null Member 18 years, 1 month ago]

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

[@null Member 18 years, 1 month ago]

Any 1?

[@peiqinglong Member 18 years, 1 month ago]

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