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

Question

Hello,

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>
    <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,

Answer 1

I'm just curious: WHY?

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

Answer 2

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

Answer 3

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>