html - 将两个 div 与动态宽度对齐，并将嵌套表格与 100% 宽度对齐

Question

我试图让两个 div(具有动态宽度)在宽度为 100% 的父级中并排排列；直到我在其中一个 div 中遇到嵌套表格(也有 100% 的)之前并不困难。

我想要的:
#parent 宽度 100%
#right 内容引起的自动宽度
#left 填充“#right”留下的空白区域
table "#left"的 100% 宽度

问题:
正如您在下面的示例中看到的，我可以让 div 并排显示，但我无法让表格成为“#left”的 100%；相反，它位于“#parent”下方。

示例:
http://jsfiddle.net/MHWQT/

代码:

html

<div id="parent">

    <div id="right">RIGHT!</div>

    <div id="left">
        <table>
            <tr>
                <th>Header</th>
                <th>Also Header</th>
            </tr>
        </table>
    </div>

</div>

CSS

#parent {
    width: 100%;
    height: 300px;
}

#right {
    float: right;
    width: auto;
    height: 100%;
}

#left {
    width: 100%;
    height: 100%;
}

table {
    width: 100%;
}

编辑
重播一个答案
我忘了提到当屏幕在一定宽度以下时，我将使用 @media 属性来更改 #parent 中的所有内容。所以我想保留当前的 ​​html 结构

Answer 1

The OP wrote in an edit :

I hate posting a question and solving it shortly after, even after hours of trying to solve the problem before posting the question, but, I solved it none the less. I think...

css

#parent {
    width: 100%;
    height: 300px;
    background: rgba(255, 0, 0, 0.1);
}

#right {
    float: right;
    width: auto;
    height: 100%;
    background: rgba(0, 0, 255, 0.1);
}

#left {
    position: relative;
    overflow: hidden;
    /*width: 100%;*/
    height: 100%;
    background: rgba(0, 255, 0, 0.1);
}

table {
    width: 100%;
    background: rgba(255, 255, 0, 0.5);
}