Attributes of column (how to make it independent)

Question

Hi all,
I have a page which is made of the header area which is photoshop slices... this area is fine.
Below that there is a DIV ID which is main bulk text. On the right side is one column which is another DIV ID with a different name. And at the bottom is another with yet another name.
Although they all have different attributes overall, different width, different paddings etc etc, everytime I add a border to one of them ALL of them are effected by the change. The same if I try to add a background image to one of them, they all get the change... How do I make them completely independent ?
Sorry for the newb question. I am from a print background (Quark and PS) and I just can´t work it out...

Answer 1

The issue here is that you're adding the bg image to the wrong CSS rule.
.thrColFix #container div {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-image: url(php_images/bg_pattern.gif);
".thrColFix #container div" means any <div> tag inside an element with id="container" inside an element with class="thrColFix".
This affects all <div> tags inside <div class="thrColFix" id="container">.
To target individual <div>s you need to make the rule more specific.
e.g. to apply the image to sidebar2 only, remove the background-image attribute from the generic id="container" div:
.thrColFix #container div {
font-family: Verdana, Arial, Helvetica, sans-serif;
and add it to the sidebar2 only <div>
.thrColFix #sidebar2 {
float: right; /* since this element is floated, a width must be given */
width: 235px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 60px;
border-left-width: 1px;
border-left-style: none;
border-left-color: #555555;
border-bottom-width: 1px;
border-bottom-style: none;
border-bottom-color: #555555;
background-image: url(php_images/bg_pattern.gif);