Триколонкові фіксовані макети сайтів

При верстці макетів завжди пам'ятайте, що при додаванні якимось HTML-елементам зовнішніх полів (CSS margin), внутрішніх відступів (CSS padding) або рамок (CSS border) їх розміри буде збільшено. Тобто вони стануть більшими за ширину і висоту, вказаних у властивостях CSS width і height. Якщо не врахувати цей момент, весь макет може «поїхати» або відбудеться накладення деяких елементів один на одного. Щоб цього не сталося, необхідно скоригувати ширину та висоту з урахуванням значень усіх властивостей CSS.

Три колонки фіксовані

Приклад HTML та CSS: верстка макета з трьома фіксованими колонками

Опис макету

  1. Щоб макет був певної ширини, всі його елементи були укладені в обгортковий блок id="wrapper" зі значенням ширини 1000px. Взято саме таке значення, а не 1024px оскільки не варто забувати про смугу прокручування, яке з'явиться коли висота сторінки буде перевищувати висоту вікна браузера. Деякі верстальники вважають за краще вказувати ще менше значення, наприклад 990px.
  2. Для розташування макету по центру сторінки у обгорткового блоку вказано властивість margin:0 auto.
  3. До стовпчиків меню і сайдбар була застосована властивість CSS float зі значеннями left і right, щоб ці блоки спливли до країв сторінки, а колонка з контентом піднялася на їхній рівень.
  4. Колонці з контентом були додані бічні поля за допомогою властивості CSS margin, щоб вона не заходила під бічні колонки, що спливли.
  5. Щоб запобігти спливанню футера, якщо виявиться так, що якась із колонок буде коротшою за інші, до нього була застосована властивість clear перериваюче обтікання.

Три фіксовані колонки з контентом попереду

Приклад HTML та CSS: верстка макета з трьомафіксованими колонками та контентом попереду