CSS - Two Divs Side by Side, One takes up as much room as need, other fills rest of width

I'm trying to get two Divs to sit side by side. I want one div to take up as much width as is needed and the other to to take up the remaining width so both divs span 100% width. Is this possible? I've tried floating and a bunch of different positioning settings but I can't find a solution that works. I naturally thought that adding a float: left to the left most element would work, however when you try to add padding/margin/border to the right element the browser wont apply it. Here is some code that I've开发者_运维知识库 extended (from an existing answer) to illustrate the problem.

<style>
    #foo {
        float: left;
        background: red;
        height: 100%;
        padding: 5px;
    }
    #bar {
        background: green;
        border: solid 1px blue;
        padding: 5px;
        height: 100%;
    }
</style>   
<div>
    <div id="foo">foo</div>
    <div id="bar">bar</div>
</div>

If you open this code up in a browser you'll notice that the bar div isn't padded, and the border isn't applied to it... I have no idea why.

Thanks for any help.

---

This works:

<style>
    #foo {
        float: left;
        background: red;
    }
    #bar {
        background: green;
    }
</style>   
<div>
    <div id="foo">foo</div>
    <div id="bar">bar</div>
</div>

http://pastehtml.com/view/19ldeqq.html

---

why not use a table, set the whole table width to 100% and then each of the rows without a width, like so:

<table width="100%" border="0"> <tr> <td><div>DIV INFO LEFT</div></td> <td><div>DIV INFO RIGHT</div></td> </tr> </table>

---

This is using javascript, but it is the only way I have found to do this.

<script type="text/javascript">
        window.onload = shouldNotBeThisHard;
        window.onresize = shouldNotBeThisHard;
        function shouldNotBeThisHard() {
            var j = document.getElementById('divThatYouWantAllOf');
            var k = document.getElementById('divForRestOfScreen');
            var jh = 0;
            if (j)
                jh = j.clientWidth;
            var h = (window.innerWidth - (jh + 30));
            k.style.width= h + "px";
        }
</script>

with the HTML looking like this:

<div id="divForRestOfScreen" style="float:left;overflow:auto;">
    asdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsd
    sdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsd
    sdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsds
    dsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsd
    sdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsd
    </div>
    <div id="divThatYouWantAllOf" style="float:right" >
    This is why I hate web programming.
    </div>