Display two columns with CSS, one with fixed width and another to take the rest of space

I'm just trying to get into the benefits of using CSS vs. tables, but so far I'm not convinced. Something that I could do within a minute with a table seems to be not so easy with CSS (at least for me at this point.) So, this question is not about merits of using CSS vs. tables. I need to know how to do the following with CSS:

Say, I have an encompassing element that needs to be separated in two columns, so to speak:

<div id="idOuter">
 <div id="idLeft"></div>
 <div id="idRight"></div>
<div>

idLeft element must be of a fixed width. For instance, 100px. It will contain a text label with a margin. But the idRight must occupy whatever width is left in the idOuter div. It will contain a text input element with a margin. The idOuter should also reflect the height of both idLeft and idRight and have its own margin.

So how do you do it? I keep messing with floats and inline-blocks and widths but it always comes out messed up when I resize the browser window?

Solution

It's relatively easy - http://jsfiddle.net/bWuQB/5/

#idOuter {
    width: 100%;
    overflow: hidden;
    position: relative;
}

#idLeft {
    height: 100%;
    width: 100px;
    background: orange;
    position: absolute;
}

#idRight {
    margin-left: 100px;
    height: 100%;
    background: beige;
}

And you have to forget about using tables for layouts and anything, but tabular data. When you get used to table-less layouts you'll like them. And semantically it's the correct solution.

EDIT: Removed unnecessary float statement and updated Fiddle