html - フロートされた外部 div は、その子に対応するようにサイズ変更されていません

Question

高度に凝縮されたコードは次のとおりです。

<div style="float:left; border: 2px red solid; padding: 2px; margin: 2px;">
    <div style="width:50%; border: 2px green solid; padding: 2px;  margin: 2px;">
        <ul>
            <li>I_Would_Like_The_Outer_Div_To_Resize_To_Accomdate_This_Blob_Of_Text</li>
            <li>It's floated-ed because I'm using floating to implement a float layout.</li>
        </ul>
    </div>
</div>

そして、これが出力です。内側の div にテキストの長い塊が含まれるように、外側の div の幅を広げたいと思います。出力は次のとおりです。

編集：

わお。私は言いたかった：

テーブルのない COLUMN レイアウトを実装するためにフローティングを使用しているため、外側の div はフロートされています。

Answer 1

追加するだけword-wrap:break-wordで、

<div style="float:left; border: 2px red solid; padding: 2px; margin: 2px;">
    <div style="width:50%; border: 2px green solid; padding: 2px;  margin: 2px;word-wrap: break-word;">
        <ul>
            <li>I_Would_Like_The_Outer_Div_To_Resize_To_Accomdate_This_Blob_Of_Text</li>
            <li>It's floated-ed because I'm using floating to implement a float layout.</li>
        </ul>
    </div>

Answer 2

両方の DIVwidth: autoを指定して、オプションで a を設定してみてくださいmin-width。