Фиксированный макет с двумя колонками

Теперь давайте создадим макет с двумя колонками. Для этого нам нужно создать еще два блока: для левой колонки <div class="leftCol"></div>, и для правой колонки, т.е. для основной части - <div class="main"></div>:

Фиксированный макет с двумя колонками

Эти колонки мы пропишем в блоке content, для начала удалите запись "Привет, Мир!":

Фиксированный макет с двумя колонками

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

Фиксированный макет с двумя колонками

Нам нужно, чтобы основная часть, а это то, что будет лежать в блоке <div class="main">...</div>, находилась справа от левой колонки, поэтому ставим float: left; устанавливаем ширину блока, цвет фона блока, отступ справа, и отступы внутри блока. Возьмите какой нибудь текст, и вставьте между тегами <div class="leftCol">...</div>:

Фиксированный макет с двумя колонками

Сохраняем изменения и открываем шаблон в браузере:

Фиксированный макет с двумя колонками

Теперь нужно прописать стили для основной части, то есть для блока <div class="main">...</div>:

Фиксированный макет с двумя колонками

Тоже свойство нужно дописать для блока .content:

Фиксированный макет с двумя колонками

Как работают эти свойства подробно рассмотрено в видеоматериале. Добавьте текст в блок .main:

Фиксированный макет с двумя колонками

Сохраняем все изменения и смотрим результат:

Фиксированный макет с двумя колонками

Скачать шаблон с двумя колонками

Видеоматериал по этому уроку:

http://youtu.be/_UtzN4AAOu8

Источник: http://psd-html-css.ru/css/fiksirovannyy-maket-s-dvumya-kolonkami

Читать комменты и комментировать

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



Защитный код
Обновить

Фиксированный макет с двумя колонками | | 2012-03-29 14:17:00 | | Статьи Web-мастеру | | Теперь давайте создадим макет с двумя колонками. Для этого нам нужно создать еще два блока: для левой колонки , и для правой колонки, т.е. для основной части - :Эти колонки мы пропишем в блоке | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: