html5htmlcss

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

просмотры: 7.7K

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

Источник

Ответов (5)

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>
Источник

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>
Источник

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

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

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

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

и правый (фиксированной ширины) столбец: position: absolute: top: 0; справа: 0;

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

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

Источник

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

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

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

Источник