CSS - автоматическая ширина div

Question

У меня есть HTML структура, которая может меняться в зависимости от контекста страницы. На некоторых страницах выглядит так:

<div class="container">
  <div class="column">
    blah
  </div>    
</div>

и на других:

<div class="container">
  <div class="column">
    blah
  </div>    
  <div class="column">
    blah
  </div>    
</div>

Итак, контейнер имеет ширину жидкости (100%).

Div .column тоже жидкий, и должен иметь ширину своего контейнера в первом примере, т.е. 100%, а во втором примере ширина 50% и выровнена по левому краю.

Как:

----------------------------
|                           |
|         column1           |
|                           |
-----------------------------

и

----------------------------
|            |              |
|  column2   |  column2     |
|            |              |
-----------------------------

Как я могу это сделать?

Я также должен отметить, что я не могу изменить какую-либо разметку в column1 / column2 (не могу добавить классы или что-то в этом роде, возможно, только используя javascript hacks или перехватываю вывод php и используя regex:)

Answer 1

Я могу придумать два решения.

1. Используйте CSS3 flex box .
2. Установите для столбцов значение display: table-cell; для столбцов и display: table-row; для контейнера.

Answer 2

Лучшее, что я могу придумать, это JavaScript: http://jsfiddle.net/V5Au7/.

Некоторые довольно раздражающие ошибки:

1. Это предполагает, что единственные div в #container - это те, которые имеют имя класса "column".
2. Предполагается, что столбцы не имеют границ, отступов или полей.
3. Вы можете столкнуться с проблемами субпикселей, полагаясь на проценты. Конечно, это, вероятно, не будет проблемой, если вы будете использовать только один или два столбца.

Должен быть какой-то способ только для CSS, который также может работать в IE6. Я чувствую это, я просто не могу найти это.