Сложная верстка с центрированными эластичными блоками

Question

У меня есть 3 блока: один упаковщик и два других внутри оболочки. Внутренние блоки имеют одинаковый размер.

Обертка эластична, ее ширина изменяется при изменении размера окна. 2 блока внутри обертки тоже эластичны. Каждый из этих 2-х внутренних блоков имеет свойство min-width.

Когда обёртка достаточно широка, внутренние блоки располагаются в одну строку один за другим. Но когда обёртка становится слишком узкой, блоки располагаются в 2 строки.

Конечная цель, которую вы можете увидеть на картинке ниже:

альтернативный текст http://img155.imageshack.us/img155/9006/nessview.png

Важный момент: как вы можете видеть на третьем блоке, когда блоки расположены в 2 строки, они расположены в центре.

Вопрос: возможно ли сделать этот макияж, используя просто html и css?

Answer 1

Как-то так у меня работает в IE 7 и FF 3:

<div style="width: 49%; min-width: 300px; float: left; background: red;">Test</div>
<div style="width: 50%; min-width: 300px; float: left; background: blue">Test</div>

Проблема в том, что при сжатии он не выравнивается по центру, а IE 6 ненавидит минимальную ширину.

Все еще глядя на выравнивание по центру ...

Только Firefox:

<div style="text-align: center">
  <div style="display: inline-block; width: 49%; min-width: 300px; margin: 0 auto; background: red;">Test</div>
  <div style="display: inline-block; width: 50%; min-width: 300px; margin: 0 auto; background: blue;">Test</div>
</div>

Answer 2

Если я правильно понимаю ваш вопрос, вы хотите, чтобы внешняя коробка никогда не становилась настолько узкой, чтобы два внутренних элемента располагались друг над другом?

Поместите также минимальную ширину на внешнюю рамку, которая равна суммированной минимальной ширине, отступам, полям и границам двух внутренних. Вы также можете сделать вид, что у IE6 минимальная ширина, таким образом:

min-width: 200px;
width: auto!important;
width: 200px; /* The last one will be used by IE6 (as min-width), the !important one by standards compliant browsers */

Также должно работать с минимальной высотой.