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

Question

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.

Answer 1

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>

Answer 2

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