Резиновая средняя колонка в трехколоночном макете

Опубликовано
Комментарии Нет

Трехколоночный макет

HTML-код:

<div id="container">
  <div id="content">
    <section id="left">
      Фиксированная левая сторона
    </section>
    <section id="main">
      Резиновое основное поле
    </section>
  </div>
</div>
<section id="sidebar">
  Фиксированная правая сторона
</section>

CSS:

#container {		/* Первая обертка */
  width: 100%;
  float: left;
  margin-right: -297px;
}
#content {		/* Вторая обертка */
  margin-right: 297px;
}
#left {			/* Левая колонка*/
  width: 200px;		/* ширина 200px */
  float: left;
}
#main {			/* Основная колонка */
  margin-left: 300px;	/* ширина 100% - 200px - 300px */
}
#sidebar {		/* Правая колонка */
  width: 297px;		/* ширина - 300px */
  float: right;
}

Двухколоночный макет

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

HTML-код:

<div id="container">
  <section id="main">
    Резиновое основное поле
  </section>
</div>
<section id="sidebar">
  Фиксированная правая сторона
</section>
CSS:
#container {		/* Первая обертка */
  width: 100%;
  float: left;
  margin-right: -297px;
}
#main {			/* Основная колонка */
  margin-right: 297px;	/* ширина 100% - 200px - 300px */
}
#sidebar {		/* Правая колонка */
  width: 297px;		/* ширина - 300px */
  float: right;
}

Автор

Комментарии

Нет комментариев к данной статье.

Комментарии

Поля обозначенные как * требуются обязательно. Перед постингом всегда делайте просмотр своего комментария.





← Старые Новые →