CSS - колонки с фиксированной жидкостью

Question

В теле моего сайта я пытаюсь создать два столбца - один справа и с фиксированной шириной (300 пикселей) для рекламы и т. Д., А другой слева, который займет оставшееся место на странице. Как это можно сделать в CSS?

Answer 1

CSS:

.column-right {
    float: left;
    width: 100%;
    height: 200px;
    background-color: red;
}

.column-right .column-content {
    margin-left: 250px;
}

.column-left {
    float: left;
    margin-left: -100%;
    width: 250px;
    height: 200px;
    background-color: green;
}

HTML:

<div class="column-right">
    <div class="column-content">
        <strong>Right Column:</strong><em>Liquid</em>
    </div>
</div>
<div class="column-left">
    <strong>Left Column:</strong><em>250px</em>
</div>

Answer 2

Вот инструмент для генерации фиксированных столбцов жидкости для размещения рекламы AdSense.

Answer 3

CSS:

#right-column{
 width:300px;
 float:right;
}

#other-column{
 float:left;
 width:100%;
 padding-right:20px; /*to prevent text overlap as suggested in the comment*/
}

В HTML:

<div id='right-column'>
 <!-- ads here -->
</div>
<div id='other-column'>
 <!-- content here -->
</div>

Answer 4

Одно решение, которое я нашел для этого, состоит в том, чтобы переместить правый столбец вправо и дать левому столбцу абсолютную позицию с левым: 0 и правым: 300 пикселей Это сделает его текучим, как если бы вы дали ему ширину: 80%, но это будет по-другому относительно родительского контейнера.

Вот пример: http://jsfiddle.net/tkane2000/dp9GZ/

Одна проблема, с которой вы можете столкнуться, заключается в том, что, поскольку она абсолютна, она не будет естественным образом опускать элементы под ней.

Другим возможным решением было бы дать левый столбец ширина: 100% отступ справа: 300px;

и правый (фиксированная ширина) столбец: позиция: абсолютная: верх: 0; право: 0;

Возможно, вам потребуется установить box-sizing: border-box в левом столбце.

Это также как некоторые ограничения. На ум приходит следующее: если бы вы хотели, чтобы левый столбец имел границу-право, чтобы отделить каждый из них, граница была бы с неправильной стороны правого столбца.

Answer 5

Возможно, вы также захотите проверить YUI: CSS Grid Builder . Это простой веб-интерфейс, где вы указываете, какой макет сетки вы ищете, и он предоставит вам HTML-код, который вы можете использовать в сочетании с YUI Grids CSS framework , чтобы получить желаемый макет. Одна приятная вещь в CSS-инфраструктуре YUI Grids - она ​​имеет хорошую поддержку кросс-браузеров , что экономит ваше время, заставляя ее работать в разных браузерах. Вы также можете выполнить обратный инжиниринг кода, предоставленного вами от создателя сетки, чтобы получить некоторые идеи о том, как вы можете сделать это самостоятельно. Настройки, которые вы хотите использовать с YUI: CSS Grid Builder для получения желаемого макета, следующие:

1. Размер кузова: 100%
2. Столбцы кузова: боковая панель справа 300px