2 columns with DIV .... max size for the second

I have this code :

<div id="containerDiv" style="background-color:Lime;">
    <div style="float:left;width:150px; background-color:Red;">
        AAAA
    </div>
    <div style="float:left;background-color:Fuchsia;margin-left:10px;">
        BBBB
    </div&g开发者_JS百科t;
    <br style="clear:both;" />
</div>

The first column has fix size, I'd like the second have the rest of the with available in the container div.

Any idea ?

Update1: My code give this : http://tinypic.com/r/103x65e/6 I'd like the magenta arrive to the arrow

Thanks,

You can change the left margin of the second column to 150px+10px=160px and remove the float: left. Additionally you can add the clearfix class as stated by Staicu, which removes the need for a BR element with "clear:both". If you like to have both columns have the same height you can use the Faux Column trick as stated by Staicu. If things break in Internet Explorer you can fix it with the info found on positioniseverything

<div id="containerDiv" style="background-color:Lime;" class="clearfix">
    <div style="float:left; width:150px; background-color:red;">
        AAAA
    </div>
    <div style="background-color:fuchsia; margin-left:160px;">
        BBBB
    </div>
</div>

Use CSS display: table[-row|-cell] property. It gives use table-like bahaviour.

I'm just curious: WHY?

1. you can use clearfix fix;
2. you can use faux column trick;