[Null]

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 Adams]

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]

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 Adams]

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]

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]

add position: absolute; in there

[Null]

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]

Any 1?

[peiqinglong]

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