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

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

В итоге,Мне нужно:

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

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

Я открыт дляРешения 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, . Подробнее об этом читайте .