How to achieve layout goal - Two Column - html

Question

Not to start a big debate about tables vs css - here goes
I have a two column layout I want to achieve as you can see here:
http://jsfiddle.net/p5S5J/1/ (not to scale)
Here is my attempt at getting layout to work with DIVs
http://jsfiddle.net/xyt2r/1/
Basically, is there a way to have that second DIV automatically fill up the rest of the space in it's (fixed width) parent container without having to specify a width for it?
UPDATE
#thirtydot came up with this (I edited a bit): http://jsfiddle.net/thirtydot/xyt2r/5/
It seems that overflow: hidden on the second DIV keeps the border. I'll have to look at this closer since there seems to be some weird margin action in Chrome and I'm not convinced this isn't Voodoo yet. Anyone care to explain why/how this works?

Answer 1

So, I'm making a proper answer out of my comment. I've improved the CSS slightly.
See: http://jsfiddle.net/2WUgK/
I'm not convinced this isn't Voodoo yet
This will work in IE7+ and all modern browsers. The voodoo is thoroughly explained here :)
HTML:
<div id="my-container">
<div id="column-1" class="layout">Hi!</div>
<div id="column-2" class="layout">Hello</div>
</div>
CSS:
#my-container {
width: 200px;
border: 1px solid red;
padding: 6px 6px 6px 0;
}
#column-1 {
margin: 0 6px;
padding: 6px;
width: 60px;
float: left;
}
#column-2 {
padding: 6px;
overflow: hidden;
}
.layout {
border: 1px solid blue;
height: 120px;
}

Answer 2

I have created the layout you were looking for. Simple use of Float, and Clear (css elements) http://jsfiddle.net/louis002/ZWGfQ/10/

Answer 3

I prefer using tables since it seems to be more cross browser friendly.
But I hear you, so what i've done when i use div tags is "float" the left column left and float the right column right
<div style="float:left;">left column</div>
<div style="float:right:">right column</div>
I've had better luck with this than specifying widths since some browsers may not display it right or if i have dynamic data inside of it and it shifts, boom! your page is now all out of sorts.