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

Очень часто нужно сделать трех колоночный макет сайту, где две крайних из них должны быть фиксированные, а средняя (вторая) стягиваться и растягиваться (должна быть резиновой). Когда-то давно я нашел подходящее для себя решение с отрицательным маргином и применил на одном сайте.

Всякий раз, когда нужно это повторить на другом, новом сайте, мне приходится лезть в код того, старого сайта и выковыривать эту информацию.

Спустя уже практически 3 года, я наконец-то решился вынести эту информацию в отдельную публикацию, к которой я всегда могу вернуться и перенять эту технологию на новый сайт.

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

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;
}

P.S. На сегодняшний день разработка сайта без его дальнейшего продвижения уже не имеет никакого смысла. Раскрутка сайтов – это такая же необходимая вещь, как и техническое поддержание. Продвижение – это очень сложно, поэтому сразу же к профессионалам, сэкономите свои деньги и время.

Комментарии:

  1. myr4ik07 опубликовал комментарий 24 Апрель 2013, 20:02 #

    Я вам очень благодарен за шаблоны!

    | Ответить
    • ITShaman опубликовал комментарий 29 Апрель 2013, 05:31 #

      Рад, что понадобилось не только мне

      | Ответить
Имя
e-mail
Сайт
Текст комментария: