Товаров: 0 (0р.)

Две колонки css: Web-разработка • HTML и CSS

Содержание

Web-разработка • HTML и CSS

Две колонки

Две колонки, резиновый

Свойство float принимает одно из трех значений: left, right или none. Это свойство, примененное к тегу <div> с содержимым, позволяет создать боковое меню: 

#sidebar {
  float: left;
  width: 200px;
}
#content {
  margin-left: 200px;
}

На рисунке ниже показаны эти два css-свойства в действии:

Здесь блок #left перемещен к левому краю. У него есть фиксированная ширина, однако у главного содержимого #content ее нет, что делает этот дизайн резиновым. Главный раздел страницы просто расширяется, заполняя окно браузера. 

<!DOCTYPE html>
<html>
<head>
<title>Шаблон, две колонки</title>
</head>
<body>
<div></div>
<div>Левая колонка</div>
<div>Основной контент</div>
<div></div>
</body>
</html>
body {
  margin: 0;
  padding: 0;
}
#header {
  height: 100px;
  background: #2277aa;
}
#left {
  float: left;
  width: 250px;
  background: #ddd;
}
#content {
  margin-left: 250px;
  overflow: hidden;
  background: #eee;
}
#footer {
  clear: both;
  height: 50px;
  background: #2277aa;
}

Давайте немного улучшим шаблон и добавим отступы: 

body {
  margin: 0;
  padding: 0;
}
#header {
  height: 100px;
  background: #2277aa;
}
#left {
  float: left;
  width: 250px;
  padding: 10px;
  background: #ddd;
}
#content {
  margin-left: 270px;
  padding: 10px;
  background: #eee;
}
#footer {
  clear: both;
  height: 50px;
  background: #2277aa;
}

Элемент #left по высоте меньше элемента #content, но мы можем это исправить, добавив в разметку еще один элемент <div> и установив для него background-image шириной 270px, высотой 1px и цветом #ddd: 

<body>
<div></div>
<div>
  <div>Левая колонка</div>
  <div>Основной контент</div>
</div>
<div></div>
</body>
#bg-left {
  background: url(images/bg-left. png) left top repeat-y;
}

Две колонки, фиксированный

Ограничим шаблон по ширине и зададим выравнивание по центру, для этого добавим еще один элемент <div>: 

<body>
<div>
  <div></div>
  <div>
    <div>Левая колонка</div>
    <div>Основной контент</div>
  </div>
  <div></div>
</div>
</body>
#wrapper {
  width: 1000px;
  margin: 0 auto;
}

Совместим достоинства фиксированной и резиновой верстки: 

#wrapper {
  min-width: 1000px;
  max-width: 1200px;
  margin: 0 auto;
}

Аналогично создаем шаблон с двумя колонками, где блок #right перемещен к правому краю:

Три колонки

Три колонки, фиксированный

Теперь создадим шаблон с тремя колонками: 

<!DOCTYPE html>
<html>
<head>
<title>Шаблон, три колонки</title>
</head>
<body>
<div>
  <div></div>
  <div>
  <div>
    <div>Левая колонка</div>
    <div>Правая колонка</div>
    <div>Основной контент</div>
  </div>
  </div>
  <div></div>
</div>
</body>
</html>
body {
  margin: 0;
  padding: 0;
}
#wrapper {
  width: 1000px;
  margin: 0 auto;
}
#header {
  height: 100px;
  background: #2277aa;
}
#left {
  float: left;
  width: 250px;
  padding: 10px;
  background: #ddd;
}
#bg-left {
  background: url(images/bg-left.
 
 png) left top repeat-y;
}
#right {
  float: right;
  width: 200px;
  padding: 10px;
  background: #ccc;
}
#bg-right {
  background: url(images/bg-right.png) right top repeat-y;
}
#content {
  margin-left: 270px;
  margin-right: 220px;
  padding: 10px;
  background: #eee;
}
#footer {
  clear: both;
  height: 50px;
  background: #2277aa;
}

Три колонки, фиксированный, контент сверху

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

<!DOCTYPE html>
<html>
<head>
<title>Шаблон, три колонки</title>
</head>
<body>
<div>
  <div>
  <div>
  <div></div>
  <div>
    <div>
      <h2>Lorem ipsum</h2>
      <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit...
      </p>
      <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
 
 ..
      </p>
    </div>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit...
    </div>
  </div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit...
  </div>
  <div></div>
  </div>
  </div>
</div>
</body>
</html>
 
body {
  margin: 0;
  padding: 0;
}
#wrapper {
  margin: 0 auto;
  width: 1000px;
}
#header {
  height: 100px;
  background: #2277aa;
}
#wrap {
  float: left;
}
#left {
  float: left;
  width: 250px;
  background: #ddd;
}
#content {
  float: right;
  width: 550px;
  background: #eee;
}
#right {
  float: right;
  /*
  вместо float: right;
  можно использовать
  margin-left: 800px;
  */
  width: 200px;
  background: #ccc;
}
#footer {
  clear: both;
  height: 50px;
  background: #2277aa;
}
Добавим отступы и выравнивание колонок по высоте:
<!DOCTYPE html>
<html>
<head>
<title>Шаблон, три колонки</title>
</head>
<body>
<div>
  <div></div>
  <div>
  <div>
  <div>
    <div>
      <h2>Lorem ipsum</h2>
      <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
 
 ..
      </p>
      <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit...
      </p>
    </div>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit...
    </div>
  </div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit...
  </div>
  <div></div>
  </div>
  </div>
</div>
</body>
</html>
body {
  margin: 0;
  padding: 0;
}
#wrapper {
  margin: 0 auto;
  width: 1000px;
}
#header {
  height: 100px;
  background: #2277aa;
}
#wrap {
  float: left;
}
#left {
  float: left;
  width: 250px;
  padding: 10px;
  background: #ddd;
}
#bg-left {
  background: url(images/bg-left.png) left top repeat-y;
}
#content {
  float: right;
  width: 490px;
  padding: 10px;
  background: #eee;
}
#right {
  float: right;
  /*
  вместо float: right;
  можно использовать
  margin-left: 780px;
  */
  width: 200px;
  padding: 10px;
  background: #ccc;
}
#bg-right {
  background: url(images/bg-right.
 
 png) right top repeat-y;
}
#footer {
  clear: both;
  height: 50px;
  background: #2277aa;
}

Три колонки, фиксированный, контент сверху

Еще один способ разместить основной контент перед контентом боковых колонок — использовать отрицательный margin. В этом случае элементы #content, #left и #right можно разместить в любом порядке в html-коде и потом расположить их произвольно на экране. Использование отрицательного поля позволяет «втянуть» элемент, описываемый в коде позже, над элементом, предшествующим ему.

<!DOCTYPE html>
<html>
<head>
<title>Шаблон, три колонки</title>
</head>
<body>
<div>
  <div></div>
  <div>
    <h2>Lorem ipsum</h2>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit...
    </p>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit...
    </p>
  </div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
 
 ..
  </div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit...
  </div>
  <div></div>
</div>
</body>
</html>
body {
  margin: 0;
  padding: 0;
}
#wrapper {
  margin: 0 auto;
  width: 1000px;
}
#header {
  height: 100px;
  background: #2277aa;
}
#content {
  width: 550px;
  float: left;
  margin-left: 250px;
  background: #eee;
}
#left {
  float: left;
  width: 250px;
  margin-left: -800px;
  background: #ddd;
}
#right {
  float: right;
  /*
  вместо float: right;
  можно использовать
  margin-left: 800px;
  */
  width: 200px;
  background: #ccc;
}
#footer {
  clear: both;
  height: 50px;
  background: #2277aa;
}

Как видите, левое поле элемента <div> должно быть равно ширине левого бокового меню. Если для левого бокового меню мы хотим добавить отступы 10px, то margin-left будет 

250px(значение width) + 10px(padding-left) + 10px(padding-right) = 270px

Если боковое меню имеет границы, их тоже надо учитывать.

Теперь о том, как рассчитать величину отрицательного margin-left для элемента <div>. Складываем ширину элемента #content, левые и правые поля и отступы, а также левую и правую границы. Если центральный столбец имеет ширину 550px, имеет границу 1px, отступ 10px, а также левое поле 270px для размещения левого бокового меню: 

550px + 1px + 1px + 10px + 10px + 270px = 842px

Давайте немного улучшим наш шаблон — добавим отступы и выравнивание колонок по высоте с помощью background-image: 

<!DOCTYPE html>
<html>
<head>
<title>Шаблон, три колонки</title>
</head>
<body>
<div>
  <div></div>
  <div>
    <div>
      <h2>Lorem ipsum</h2>
      <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit...
      </p>
      <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit...
      </p>
    </div>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. ..
    </div>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit...
    </div>
  </div>
  <div></div>
</div>
</body>
</html>
body {
  margin: 0;
  padding: 0;
}
#wrapper {
  margin: 0 auto;
  width: 1000px;
}
#header {
  height: 100px;
  background: #2277aa;
}
#content {
  width: 490px;
  float: left;
  margin-left: 270px;
  padding: 10px;
  background: #eee;
}
#left {
  float: left;
  width: 250px;
  margin-left: -780px;
  padding: 10px;
  background: #ddd;
}
#right {
  float: right;
  width: 200px;
  padding: 10px;
  background: #ccc;
}
#bg-left-right {
  background: url(bg-left.png) left top repeat-y, url(bg-right.png) right top repeat-y;
  overflow: hidden;
}
#footer {
  clear: both;
  height: 50px;
  background: #2277aa;
}

Три колонки, резиновый, контент сверху

<!DOCTYPE html>
<html>
<head>
<title>Три колонки</title>
</head>
<body>
<div>
  <div></div>
  <div>
    <div>
      <h2>Lorem ipsum</h2>
      <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. ..
      </p>
      <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit...
      </p>
    </div>
  </div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit...
  </div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit...
  </div>
  <div></div>
</div>
</body>
</html>
body {
  margin: 0;
  padding: 0;
}
#wrapper {
  min-width: 1000px;
  max-width: 1200px;
  margin: 0 auto;
}
#header {
  height: 100px;
  background: #2277aa;
}
#wrap {
  width: 100%;
  float: left;
}
#content {
  margin: 0 200px 0 250px;
}
#left {
  width: 250px;
  float: left;
  margin-left: -100%;
  background: #ddd;
}
#right {
  width: 200px;
  float: left;
  margin-left: -200px;
  background: #ccc;
}
#footer {
  clear: both;
  height: 50px;
  background: #2277aa;
}

Добавим отступы и выравнивание колонок по высоте: 

<!DOCTYPE html>
<html>
<head>
<title>Три колонки</title>
</head>
<body>
<div>
  <div></div>
  <div>
    <div>
      <div>
        <h2>Lorem ipsum</h2>
        <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. ..
        </p>
        <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit...
        </p>
      </div>
    </div>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit...
    </div>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit...
    </div>
  </div>
  <div></div>
</div>
</body>
</html>
body {
  margin: 0;
  padding: 0;
}
#wrapper {
  min-width: 1000px;
  max-width: 1200px;
  margin: 0 auto;
}
#header {
  height: 100px;
  background: #2277aa;
}
#wrap {
  width: 100%;
  float: left;
}
#content {
  margin: 0 220px 0 270px;
  padding: 10px;
}
#left {
  width: 250px;
  float: left;
  padding: 10px;
  margin-left: -100%;
  background: #ddd;
}
#right {
  width: 200px;
  float: left;
  padding: 10px;
  margin-left: -220px;
  background: #ccc;
}
#bg-left-right {
  background: url(bg-left.png) left top repeat-y, url(bg-right.png) right top repeat-y;
  overflow: hidden;
}
#footer {
  clear: both;
  height: 50px;
  background: #2277aa;
}

Поиск: CSS • HTML • Web-разработка • Верстка

Две колонки, навигация слева | htmlbook. ru

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

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

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

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

#leftcol { /* Левая колонка */
  float: left; /* Обтекание справа */
  width: 200px; /* Ширина колонки */
}
#rightcol { /* Правая колонка */
  margin-left: 225px; /* Отступ слева */
}

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

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

#leftcol { /* Левая колонка */
  float: left; /* Обтекание справа */
  width: 20%; /* Ширина колонки */
}
#rightcol { /* Правая колонка */
  margin-left: 21%; /* Отступ слева */
}

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Байки из склепа</title>
  <style type="text/css">
   body {
    font-family: Arial, Helvetica, sans-serif; /* Рубленый шрифт текста */
    margin: 0; /* Обнуляем отступы браузера */
   }
   h2 {
    font-size: 36px; /* Размер шрифта */
    font-weight: bold; /* Жирное начертание */
    margin: 0; /* Убираем отступы */
    color: #fc6; /* Цвет текста */
   }
   h3 {
    margin-top: 0; /* Убираем отступ сверху */
   }
   #head { /* Верхний блок */
    background: #0080c0; /* Цвет фона */
    padding: 10px; /* Поля вокруг */
   }
   #menu { /* Левая колонка */
    float: left; /* Обтекание справа */
    border: 1px solid #333; /* Параметры рамки вокруг */
    width: 200px; /* Ширина колонки */
    padding: 5px; /* Поля вокруг текста */
    margin: 10px 10px 20px 5px; /* Значения отступов */
   }
   #menu div {
    padding: 2px; /* Поля вокруг ссылок */
   }
   #menu a { 
    display: block; /* Отображать ссылку как блок */
    padding: 2px; /* Поля вокруг ссылок */
    margin: 1px; /* Отступы вокруг */
    font-size: 0. 9em; /* Размер текста */
    text-decoration: none; /* Убираем подчеркивание текста */
   }
   #menu a:hover { 
    background: #faf3d2; /* Цвет фона */
    border: 1px dashed #634f36; /* Добавление пунктирной рамки */
    margin: 0; /* Убираем поля */
   }
   #content { /* Правая колонка */
    margin: 10px 5px 20px 225px; /* Значения отступов */
    padding: 5px; /* Поля вокруг текста */
    border: 1px solid #333; /* Параметры рамки */
   }
   .line {
    border-bottom: 1px groove #333; /* Линия между ссылками */
   }
   #foot { /* Нижний блок */
    background: #333; /* Цвет фона */
    padding: 5px; /* Поля вокруг текста */
    color: #fff; /* Цвет текста */
    clear: both; /* Отменяем обтекание */
   }
  </style>
 </head>
 <body>
  <div>
   <h2>Байки из склепа</h2>
  </div>
  <div>
   <div><a href="1.html">Все байки</a></div>
   <div><a href="2.html">Байки по автору</a></div>
   <div><a href="3. html">Байки по теме</a></div>
   <div></div>
   <div><a href="4.html">Популярные разделы</a></div>
   <div><a href="text.html">Последние байки</a></div>
  </div>
  <div>
   <h3>Алтарь демона </h3>
   <p>Утром, при ярком солнечном свете, всё выглядело совсем не так и мрачно,
   как планировалось, а даже наоборот. От свечей остались одни потёки, «кровь»
   смотрелась как краска, а перья почти целиком разлетелись от ветра. Хорошо
   сохранились только рисунки мелом, но и они были скорее прикольные, чем злые
   и загадочные. Дети с неподдельным интересом разглядывали изображения, но
   без тени тех чувств, которые испытали взрослые ночью при луне.</p>
   <p>Тем не менее, оказался один человек, на которого работа произвела
   большое впечатление, - сторож лагеря. Днём он подошёл к автору &laquo;алтаря&raquo;.</p>
   <p>- Ваша работа? - начал сторож, кивая в сторону площади. <br />
   - А что такое?  <br />
   - Ну, как же... Тут кровь..., перья птицы мёртвой..., знаки какие-то страшные
   нарисованы..., а у вас всё же дети маленькие, они испугаться могут...</p>
  </div>
  <div>
   Copyright &copy; Влад Мержевич 
  </div>
 </body>
</html>

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

Разделите Div на 2 столбца с помощью CSS

Я пытался разделить div на два столбца с помощью CSS, но мне еще не удалось заставить его работать. Моя основная структура такова:

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

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

Если я попытаюсь переместить правый и левый дивы в соответствующие позиции (правый и левый), он, похоже, игнорирует цвет фона содержимого div. И другой код, который я пробовал с разных сайтов, похоже, не может перевести в мою структуру.

Спасибо за любую помощь!

13 ответов

когда вы плаваете эти два divs, содержимое div сжимается до нулевой высоты. Просто добавьте

<br/>

после #right div, но внутри содержимого div. Это заставит контент div окружить два внутренних, плавающих divs.