Div not inheriting height and color

ok so i am just trying to layout some tableless columns in css and it wont seem to inherit my background color that wraps the main page content...plz help...the p class col1, col2, col3 dont have white background. i dont know why the content div is not auto height b/c of its contents, but if i put a height in there it shows the white background inherited from main div...and ive tried putting #content p.col1 and other varieties

 

You didn't give them one:

.col1{
width:300px;
float:left;
}
.col2 {
width:300px;
float:left;
}
.col3 {
width:300px;
float:left;
} 

Code (markup):

If you want them to have a white background, you need to state it. The default for a box is to be transparent.
Also, you aren't taking advantage of classes. Classes are supposed to HELP you. Like this:
make each of your p's class="col".

CSS:
p.col {
width: 300px;
float: left;
background-color: #fff;
}

But also, you won't see a background colour on an empty element because when they are empty, they have no height (except in IE because of a bug).


So here:
#main_pic {
background:transparent url(images/computer.jpg) no-repeat;

you only need to state "transparent" if there are other pics who have a stated background, and since you don't have
div {
background-color: #something;
}
you don't need it at all.

It's because when boxes are empty, their heights are zero. And when you add content, they are as high as that content. This is what height: auto is, and it's the default for boxes.

If you explicitly set a height, then a box will have that height, but you'll have trouble setting a box to a % height.

The CSS rules state that if you have a box with a % height, then if its parent doesn't have an explicit (non%) height, then that box will go back to height: auto.

Which is a shame.

So if you had a setup like this:

<parent>
<child></child>
</parent>

(yes, that's pseudo code)

then this won't work:
parent {
height: 60%;
}
child {
height: 100%;
}

The child will be height: auto, and actually so will the parent if the box it's in does't have a fixed height.

But this will work:

parent {
height: 60em;
}
child {
height: 100%;
}

A browser knows what 100% of 60em is, because 60em is a nice hard number for it.

There are also some other little special circumstances when you can have a % height.

However for your columns, you're going to want something called "Faux Columns"

google "faux columns css" and you'll get a bazillion results on how to make it LOOK like there are 100% tall columns. There are actually even a few different ways to do it.

 

thanks, i was gonna use them as a group but split them b/c i wanted to border the middle one. but i guess after reading about faux columns i should just use a 1px repeat-y img for that purpose and group them all together...thanks again

 

Go ahead and and check out all the different ways you can use the idea of faux columns. Don't let someone's particular solution force you to change your design. You can pretty much do any design you want, you just need to find the right technique. There are a couple of small things you can't do with CSS alone but you'd be surprised what all you can do with it.