возврат

Рецепт 3. Три колонки фиксированной ширины

Постановка задачи

Построим макет страницы с заголовочной частью, подвалом и тремя колонками фиксированной ширины. Макет должен быть выровнен по центру страницы и просматриваться без горизонтальной прокрутки в окне шириной 800 пикселов.

Для выполнения последнего условия назначим ширину колонок соответственно в 160, 440 и 160 пикселов:

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

Запишем HTML-код по следующей схеме:

То есть вcе наши области погрузим в блок container для которого зададим выравнивание по центру страницы:

  

Запишем стилевые определения.

Файл style.css

  
BODY
{
  margin:0px;
  padding:0px;
  background: #F6F2E4;  
}

.container 
{
  width: 760px;   /* Общая ширина контейнера */
  margin: 10px auto; /* Выравнивание по центру  */
  border: 1px solid black;
  background: white;  
}

/* Заголовок и логотип  */
.title
{
  border-bottom: 1px solid black;
  background: #06DFE1;  
}

/* Левая колонка    */
.left
{
  float: left; /* Плавающий блок  */
  /* Общая ширина: 160 = 5 + 150 + 5  */
  width: 150px; 
  padding: 5px;
  background: #FFE3CC;  
}

/*  Центральная колонка */
.center
{
  float: left; /* Плавающий блок  */
  /* Общая ширина: 440 = 5 + 430 + 5  */
  width: 430px; 
  padding: 5px;
  background: #FFF2A6;  
}

/* Правая колонка    */
.right
{
  float: left; /* Плавающий блок  */
  /* Общая ширина: 160 = 5 + 150 + 5  */
  width: 150px; 
  padding: 5px;
  background: #A7FBC0;  
}


/* Подвал  */
.bottom
{
  clear:left; /* Прерывание обекания для плавающих блоков  */
  font-size:70%;
  font-family:sans-serif;
  padding: 5px;
  border-top: 1px solid black;
  background: #E5E5E5;  
}

Макет основан на трёх плавающих блоках, которые моделируют 3 колонки нашей вёрстки.

Выравнивание по центру задаётся немного странным определением margin: 10px auto. Дело в том, что по умолчанию ширина блока принимает значение auto, и блок занимает ширину всей страницы. Описанным способом по центру можно выровнять только такой блок, у которого явно задана ширина (как в нашем случае). Первый аргумент задаёт нижние и верхние поля в 10 пикселов, а второй — автоматический отступ слева и справа от блока.

Ниже приводится более полный вариант HTML-кода страницы:

Файл index.htm

  
Посмотреть

Вверх вверх | возврат

© Александр Александрович Дуванов kurs@robotland.pereslavl.ru