Float-left with wrapper div

Wrapper div inherits height of float-left divs contained within.

by winstonchang

HTML

<div id="container1">
    <div id="col1">Column 1</div>
    <div id="col2">Column 2
        <br>foo
        <br>foo
        <br>foo
        <br>foo
    </div>
    <div id="col3">Column 3</div>
</div>

CSS

#container1 {
    float:right;
    width:100%;
    background: #ccc;
}
#col1 {
    float:left;
    width:30%;
    background:red;
}
#col2 {
    float:left;
    width:40%;
    background:yellow;
}
#col3 {
    float:left;
    width:30%;
    background:green;
}