Problem creating equal height columns in CSS

I have been using the examples here to setup a webpage that has columns with equal heights (using only HTML and CSS), and it is working relatively well. Here is the complete HTML and CSS code that I am using.

Newbie questions:

(1) As you can see, I tried to make the left column (id="column_bottom") have a white (#f5f5f5) background with black text, and the right column (id="content_bottom") with black background with white (#f5f5f5) text, but one side is always overriding the other. What can I do to make it what I want?

(2) Also, you can see in the CSS that I have defined fonts and background colors for body, but somehow that is not carrying through, what开发者_Go百科 should I do?

Thanks!

P.S. I am looking for a pure HTML/CSS solution, and prefer not to use javascript.

You're close. In your code, just change your styling to the columns themselves, like so:

#content_bottom {
    color: #f5f5f5;
    background:#000000; /* right column background colour */
}

#column_bottom {
    color: #000000;
    background:#f5f5f5; /* left column background colour */
}

the code below will create two boxes side-by-side and the container will always wrap those boxes, no matter how tall they are. this should solve your issue of having columns of the same height.

html:

<div class="container">
    <div class="box">blah</div>
    <div class="box">blah<br/><br/>blah</div>
    <div class="clear"></div>
</div>

css:

.container { position:relative; width:100px; border:1px solid red; }
.box { position:relative; float:left; width:40px; border:1px solid blue; }
.clear { clear:both }