html - CSS - 1 つの要素を他の div 内で右にフロートさせるにはどうすればよいですか?

Question

私は div を持っています。その div の中に 2 つの小さなものがあります。そのうちの 1 つは左にあり、もう 1 つは右にありますが、親 div の幅は増加しません。 ?

divの内部が大きくなったときに、赤いdivの高さを増やしたいです。

<div class="wrap">
    <div class="left"></div>
    <div class="right"></div>
    <div class="footer">
    </div>
</div>

.wrap{
    margin:auto;
    width:960px;
    min-height:50px;
    background:red;
}

.left{
    width:450px;
    height:100px;
    background:blue;
    float:left;
}

.right{
    width:450px;
    height:100px;
    background:green;
    float:right;
}

.footer{
width:100%;
height:100px;
background:#000;
}

フィドル。

Answer 1

これは、更新されたcssを含む更新されたフィドルリンクです。追加する必要があるのは、overflow:hidden と height:100%; だけです。.wrap クラスで。

.wrap {
    margin:auto;
    width:960px;
    min-height:50px;
    background:red;
    overflow: hidden;
    height: 100%;
}

Answer 2

継承する親 div の高さを設定します。.wrap div の高さは、内部のコンテンツに基づいて拡張されます。

.wrap
{
 margin:auto;
 width:960px;
 height:inherit;
 background-color:red;
}