3 колонны, средняя с гибкой шириной

Question

Я хотел бы иметь макет, состоящий из трех смежных блоков. Боковые делители имеют статическую ширину (она может изменяться через JavaScript), а центральные делители заполняют оставшуюся область. Когда размер первого div изменяется, он влияет только на центральный. Это похоже на таблицу (с динамическим рендерингом), которая состоит из трех столбцов.

Хорошо, но где проблема. Проблема в том, что если я поместил div с плавающей левой точкой в ​​первый столбец, а блок div во второй и третий, то блок div будет вести себя странным образом. Они отображаются в столбце ниже плавающего элемента div из первого столбца.

Пример. В первом и втором столбце у меня есть плавающий div и блок div в третьем столбце. Блок div смещен вниз относительно высоты плавающих блоков. Div в центральном столбце не смещается в его положении y только потому, что имеет свойство float left.

Я бы хотел, чтобы каждый из трех макетов div был независимым друг от друга. Я понятия не имею, почему элементы в третьем столбце плавают div в первых двух столбцах (со свойством float).

КОД:

<div style="margin: auto; display: table; width: 260px;">
        <div style="display: table-row;">
            <div style="display: table-cell; width: 100px;">

                <div style="float: left; width: 40px; height: 50px;">COL1</div> 

            </div>
            <div style="display: table-cell;">

                <div style="float: left; height: 50px;  width: 40px;">COL2</div>

            </div style="display: table-cell; width: 100px;">
            <div class="sideContainer">

                <div>COL3</div>

            </div>
        </div>
</div>

и результат: результат

Как это исправить. Как сделать все макеты div (столбцы) независимыми друг от друга. Есть идеи?

Answer 1

Вы можете сделать это, перемещая col1 и col3 влево и вправо с фиксированной шириной.

Затем добавьте левое и правое поле к col2, равное ширине col1 и col3.

Это дает вам три столбца; col1 и col3 имеют фиксированную ширину, а col2 заполняет доступную ширину:

(поле содержимого col2 синим цветом, а поля желтым)

<div class='container'>
    <div class='right'>
        col3
    </div>
    <div class='left'>
        col1
    </div>
    <div class='middle'>
        col2
    </div>
</div>



.container {
    overflow: hidden;
}
.right {
    float: right;
    width: 100px;
}
.left {
    float: left;
    width: 100px;
}
.middle {
    margin: 0 100px;
}

Попробуйте здесь: http://jsfiddle.net/22YBU/

Кстати, если вам нужно отображение: таблица, отображение: строка таблицы и отображение: ячейка таблицы, используйте таблицу; -)