Как сделать две колонки в css

Две колонки, навигация слева

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

Рис. 1

Рис. 1. Двухколонный макет с навигацией слева

Создание двух колонок происходит с помощью стилевого свойства float со значением left , которое применяется для левой колонки. При этом одновременно следует установить отступ слева для правой колонки, значение которого равно ширине левой колонки плюс расстояние между ними (пример 1).

Пример 1. Создание двух колонок

Приведенный способ создания колонок хорош тем, что ширину первого слоя можно задавать как в пикселах, так и процентах. При этом поменяются только значения свойств width и margin-left (пример 2).

Пример 2. Ширина колонки в процентах

Окончательный вариант создания макета приведен в примере 3.

Пример 3. Полный листинг

При использовании отступов и полей помним, что браузер устанавливает ширину слоя с учетом свойств width , border , padding и margin .

Макет страницы в две колонки

Одним из наиболее популярных вариантов верстки веб-страниц выступает двухколоночный макет, где в левой колонке располагаются ссылки, а в правой колонке — основной контент. Такая схема достаточно традиционна и привычна для пользователей, поэтому пользуется признанием среди разработчиков (рис. 1).

Макет страницы в две колонки

Рис. 1. Макет с двумя колонками

Создание двух колонок происходит с помощью стилевого свойства float со значением left, которое применяется для левой колонки. При этом одновременно следует установить отступ слева для правой колонки через margin-left, значение которого равно ширине левой колонки плюс расстояние между ними (пример 1).

Чтобы макет располагался по центру веб-страницы, добавим слой с именем container и колонки расположим внутри него. Для самого container необходимо установить ширину (width) и выравнивание по центру (margin: 0 auto), как показано в примере 2.

Как сделать три колонки на css

Подскажите пожалуйста, как при помощи css сделать три горизонтальных колонки ?

Две я сделал, а вот с центральной ни как разобраться не могу.

Вот Вам пример резинового макета — http://jsfiddle.net/Alex83/5rpJN/6/

Спрашивайте, если вдруг не понятно.

А вот Вам еще в догонку фиксированный макет — http://jsfiddle.net/Alex83/4UtDc/4/

Примерно так должно

Всё ещё ищете ответ? Посмотрите другие вопросы с метками css или задайте свой вопрос.

дизайн сайта / логотип © 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.12.3.40888

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *