CSS 2-column layout: middle margins don't work

Hi all,

Got a simple 2-column css layout with divs. HTML:
<div id="page_col_left">
<div id="header_logo">
<img src="../images/logo/header.gif" />
</div>
<ul id="nav_main" class="nav_main_page">
<li><a href="1/">1</a></li>
<li><a href="2/">2</a></li>
<li><a href="3/">2</a></li>
<li><a href="4/">4</a></li>
</ul>
</div>

<div id="page_col_right">
page text here....
</div>

and CSS:
div#page_col_left {
width: 200px;
float: left;
padding-right: 10px;
background-color: #FFF;
}

div#page_col_right {
border: 20px solid #000;
padding-bottom: 400px;
background-color: #E8E8E8;
}

Problem is, while the text inside the second column lines up flush with the left side of the first column, any background color, margin, padding, border, etc. in the second column disappears behind the first. There is a 20px border there now, but I tried it with a 20px padding and a 20px margin as well, and the same result - it lines up with the left of the page as if the first column were not there. Yet the text in the second column "behaves."

I have tried to stay away from floating the second column because that would require defining a width. Due to larger design considerations, things would be a lot easier if I could avoid doing so.

Is there a way to prevent that overlap and make them line up next to each other correctly?

For now, I've resorted to making the left margin of the second column the width of the first column, plus whatever I want the visible margin to be. Is this the best solution?

For now, I've resorted to making the left margin of the second column the width of the first column, plus whatever I want the visible margin to be. Is this the best solution?
That depends on whether your 2nd column has a fixed width (effectively). We need to see the rest of your page in order to tell. Does your wrapper have a fixed width? If so, it may be better to float the 2nd column too and give it a width.