CSS колонки: гибкие и гибкие по ширине

Question

В 2011 году я был поставлен в тупик с 2 колонками. Мне стыдно.;)

Задача состоит в том, чтобы придумать это:

+--------------------------------------++----------------+
| This is a header with potentially    || button div     |
|                                      ||                |
| long text that will wrap most likely |+----------------+
|                                      |
| but can't go under the button to the |
|                                      |
| right                                |
+--------------------------------------+

Ничего страшного в типичной 2-колоночной разметке, в которой вы устанавливаете поле левого столбца равным полям div справа. Переменная в этом конкретном примере, однако, заключается в том, что я не буду знать, насколько широким будет правый div в любой момент времени (он основан на строке текста, которая будет меняться.

В итоге мне нужно:

• 2 колонки
• обе колонки занимают всю ширину
• столбец справа настолько же широк, насколько и текст, который в нем содержится
• столбец слева такой же ширины, как оставшееся пространство

Кажется, я бы построил это раньше, но я в тупике.

Я открыт для решений CSS, JS или jQuery.

РЕДАКТИРОВАТЬ:

На самом деле, я уже вижу довольно простое решение jQuery. Я могу взять ширину рендеринга div справа, а затем сделать некоторую математику, вычтя эту ширину из ширины родительского контейнера, а затем установив одинаковую ширину левого столбца. Это будет мой запасной план, если не будет чистой опции CSS.

Answer 1

Смотрите: http://jsfiddle.net/vpADP/

Он будет работать в IE7+ и во всех современных браузерах.

HTML:

<div id="buttonDiv">button div as wide as text</div>
<div id="leftDiv">
    left div
</div>

CSS:

#leftDiv {
    overflow: hidden
}
#buttonDiv {
    float: right
}

Это не типичное использование overflow: hidden Прочитайте это для деталей.