Динамические размеры поплавков

Question

Мой HTML выглядит следующим образом:

<div id="list-container"> </div>
<div id="button-container"> </div>

И CSS для этих двух div:

#button-container {
    float: right;
    width: 100px;
    height: 100%;
    background-color: #f5f5f5;
}

#list-container {
    float: left;
    height: 100%;
    background-color: #FAD275;
}

Оба эти элемента расположены рядом и имеют одинаковую высоту. button-container div находится справа и должен иметь фиксированную ширину 100px. Однако левый div с именем list-container должен иметь ширину, равную оставшемуся пространству, выделенному родительским контейнером. Так, например, если мой родительский div имеет ширину 400px, а button-container div занимает 100px этого, тогда я смогу указать что-то вроде height: 100% для list-container div и что равно ширине 300px.

Абсолютное правило № 1 заключается в том, что я не могу установить фиксированную ширину для list-container div. Родительский div для всего этого объекта имеет динамически изменяемый размер, поэтому каждый дочерний элемент должен быть сконструирован так, чтобы изменять его размер, поэтому и существует этот вопрос.

Помните, что все это делается в расширении Google Chrome, поэтому у меня есть доступ к HTML5 и CSS3. Мне также не нужно беспокоиться о кросс-браузерной поддержке. Я хочу, чтобы это работало только в Chrome.

Может кто-нибудь помочь мне разобраться, как заставить list-container заполнить оставшееся пространство родительского контейнера без использования фиксированной ширины?

Answer 1

Вы можете использовать свойство CSS display: table; и display: table-cell;.

Это имитирует способ, которым таблица обрабатывает свои строки, но применяет его к элементам div.

Вам понадобится div-обертка, но это все, что вам нужно.

HTML

<div class="wrap">
<div id="list-container">list container </div>
<div id="button-container">button container </div>
</div>

CSS:

.wrap
{
    display: table;
    width: 100%;
    height: 100%;
}

#button-container {
    display: table-cell;
    width: 100px;
    height: 100%;
    background-color: #f5f5f5;
}

#list-container {
    display: table-cell;
    height: 100%;
    background-color: #FAD275;
}

См. Мой пример здесь .

Answer 2

Этот сайт может быть полезен для вас:

http://glish.com/css/

Answer 3

Установите для левого контейнера значение 100% и укажите для него правое поле в 100 пикселей.В моем первоначальном ответе тоже говорилось о набивке, но это неправильно.Маржа создает пространство для плавающего правого div.Процентное соотношение позволяет динамически изменять размер левого div.