Generate sidebar width

[greenecon]

http://thegreeneconomy.com

 

Checked out the other question on this topic, and not sure it answers my questions.  We need to make the margins on the right sidebar narrower so that we can have a 300px [most popular] advert there.

Here's what seems to be the first step:

change:

.sidebar {

    display: inline;
    float: right;
    font-size: 12px;
    line-height: 18px;
    padding: 20px 40px;
    width: 230px;

}

to:

.sidebar {

    display: inline;
    float: right;
    font-size: 12px;
    line-height: 18px;
    padding: 20px 5px;
    width: 300px;

}

OK. That works fine.  But now I cannot figure out how to adjust the header bars. I have tried almost any combo but the problem is that changing the padding here changes the width in the previous section to 296, flushes the advert right; but still leaves the bar flushed too far left or without the nice purple bar.  At one point I figured out how to get the title correct with the purple bar, but then the 5px 300px 5px got messed up.  Not sure if there's something I should do first... Well here's the section that I think I am supposed to be fixing, but can't quite see how.   [Just occurred to me that maybe I should make the purple bar and the right margin the same?  Not sure.]

.widget-area h4 {
background-color: #9d97a3;               /*sidebar widget titles*/
border-right: 8px solid #851087;        /*sidebar widget right border*/
color: #FFFFFF;
font-size: 14px;
line-height: 20px;
margin: 0 -40px 20px;
padding: 8px 40px;
/*text-shadow: 1px 1px #fff;*/
text-transform: uppercase;
}

Tried this but did not work:
.widget-area h4 {
background-color: #9d97a3;               /*sidebar widget titles*/
border-right: 8px solid #851087;        /*sidebar widget right border*/
color: #FFFFFF;
font-size: 14px;
line-height: 20px;
margin: 0 -40px 20px; [can't figure out what I am supposed to do here]
padding: 8px 5px;
/*text-shadow: 1px 1px #fff;*/
text-transform: uppercase;
}

Me, Firebug and my calculator are going somewhat crazy here, and hoping this is an easy fix. Tana

[sahdow]

Did you fix? Looks ok to me, unless I'm not understanding the description of what isn't working.

unless you are talking about the Kohls advert ?

[greenecon]

Yes, we are talking about the advert.  [And the flipping page thingy.]

The problem is that once I change the center to 300px, and the sides to 5px,the advert looks fine.  But then the grey bar with the violet accent on the right, gets messed up.  It kind of slides left, with a space on the right and an overlap onto the main content section on the left.   Nothing I have done fixes that.  If I do fix it, then the advert is back to where it was.

 

[Author]

Posts