css - フローティング div を垂直方向に伸ばす

Question

float が割り当てられた空の DIV 内に 2 つの DIV を作成しました。ページの説明とレイアウトをここに示します。

HTML:

    <div id="new_div">
        <div class="home">
            <h3 class="featurework">Header</h3>
            <h4 class="featureworktitle">Sub-header</h4>
            <img class="featureworkimg" src="img/featured-rms.jpg" alt="lilo">
        </div>

        <div class="home-description">
            <p class="home">Description section</p>
            <p class="home-viewproject"><a href="#" target="_blank">Link &raquo;</a></p>
        </div>
    </div>

CSS:

#new_div {
    width: 100%;
}

div.home {
    width: 50%;
    float:left;
    background:#1ABC9C;
}

div.home-description {
    width: 50%;
    float:left;
    -moz-box-flex: 1;
    -ms-box-flex: 1;
    -webkit-box-flex: 1;
    box-flex: 1;
    display: -webkit-box;
    display:box;
    -moz-box-orient: vertical;
    -ms-box-orient: vertical;
    -webkit-box-orient: vertical;
    box-orient: vertical;
    background:#1ABC9C;
    padding:180px 0 0 0;
}

Div クラスhomeでありhome-description、50% の幅で左にフロートされます。私の問題は、home-description宣言された前の div の高さまで div が伸びていないことです。私は、この問題を修正する同様の問題を抱えている他の Web 開発者のインターネットを循環させるという大きな問題があることを知っています。それらのほとんどは、コンテンツが 1 列しかないため、問題を解決することができました。彼らのものとは異なり、私のものは左に 2 列浮かんでいます。

より明確にするために、上記のリンクをご覧ください。