2 столбца с DIV .... максимальный размер для второго

Question

У меня есть этот код:

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

Первый столбец имеет фиксированный размер, я хотел бы, чтобы во втором столбце остальное было доступно с помощью контейнера div

Есть идеи?

Update1: Мой код дает это: http://tinypic.com/r/103x65e/6 Я бы хотел, чтобы пурпурный цвет прибыл на стрелу

Спасибо

Answer 1

Вы можете изменить левое поле второго столбца на 150px + 10px = 160px и удалить float: left. Кроме того, вы можете добавить класс clearfix, как указано в Staicu, что устраняет необходимость в элементе BR с помощью «clear: both». Если вы хотите, чтобы оба столбца имели одинаковую высоту, вы можете использовать прием Faux Column, как заявлено в Staicu. Если что-то не работает в Internet Explorer, вы можете исправить это с помощью информации, найденной в 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>

Answer 2

Использовать свойство CSS display: table[-row|-cell]. Это дает использование в стиле таблицы как поведение.

Answer 3

Мне просто любопытно: ПОЧЕМУ?

1. вы можете использовать clearfix fix;
2. вы можете использовать искусственный столбец трюк;