html - フローティング div を絶対配置コンテナ コンテナ内の幅に合わせる

Question

だから私はいくつかのhtml/cssに取り組んでいます

これらの 2 つのフローティング div とフッターを親 div 内で正しくサイズ設定できないようです。

コンテンツ div は、ヘッダーとフッターをそれぞれ表示するために絶対に配置されます。

HTML:

<div id="Content">
        <div id="Header">header</div>
        <div id="Container">
            <div id="leftTable">
                <div>left content</div>
            </div>
            <div id="rightTable">
                <div>right content</div>
            </div>
        </div>
        <div id="Footer">
            <div>footer</div>
        </div>
</div>

CSS:

html, body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}
#Content {
    padding: 0 15px;
    height: 100%;
    background-color: honeydew;
    position: relative;
    height: 100%;
}
#Header {
    height: 60px;
    background-color: aliceblue;
}
#Footer {
    position: absolute;
    bottom: 0;
    background-color: purple;
    height: 70px;
}
#Container {
    background-color: green;
    position: absolute;
    top: 60px;
    bottom: 70px;
    margin-right: 15px;
}
#Container:after {
    clear:both;
}
#leftTable {
    float: left;
    width: 50%;
    height: 100%;
    background-color: grey;
}
#rightTable {
    float: left;
    width: 50%;
    background-color: blue;
}

http://jsfiddle.net/4CabB/12/ Container div または footer div を左右に配置せず、残りのスペースを占有することを望んでいました。