Фіксований дизайн. Властивість float.

Влад Мержевич

Розглянемо, як розмістити два або більше шарів горизонтально поруч. За замовчуванням, використання тегу <div> для створення шару автоматично вставляє рядок перенесення після нього, тому кілька послідовних шарів розташовуються вертикально. Нас цікавить, як зробити те саме, але горизонтально, для створення двох колонок. Для вирішення цього завдання є два підходи: перший базується на використанні властивості float, другий – на позиціонуванні елементів.

Використання властивості float

Щоб розмістити два шари поруч по горизонталі, скористаємося стильовою властивістю float зі значенням left. Ця конструкція вказує, що шар необхідно вирівняти по лівому краю та обтікати його праворуч. Таким чином, сусідній другий шар буде прилягати до першого справа.

Теоретично, властивість float достатньо вказувати лише для одного з двох шарів. Однак у браузері Internet Explorer у цьому випадку між шарами додає невеликий проміжок, що не завжди бажано, а Firefox накладає шари один на одного. Щоб все виглядало саме так, як хочеться, float слід вказувати для всіх шарів (приклад 1).

Приклад 1. Додавання властивості float

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Дві колонки</title>
  <style type="text/css"> 
   #leftcol { /* Ліва колонка*/  
    width: 200px; /* Ширина шару */ 
    float: left; /* Стиснення з сусіднім шаром */ 
    color: white; /* Колір тексту*/ 
    padding: 10px; /* Відступи навколо тексту */ 
    background: #008000; /* Колір фону лівої колонки */ 
   }
   #rightcol { /* Права колонка*/ 
    width: 550px; /* Ширина шару */ 
    float: left; /* Стиснення з сусіднім шаром */ 
    padding: 10px; /* Відступи навколо вмісту */ 
    background: #e0e0e0; /* Колір фону правої колонки */  
   } 
  </style>
 </head> 
 <body> 
  <div id="leftcol">...</div>
  <div id="rightcol">...</div> 
 </body>
</html>

Висоту шарів визначає їх вміст, тому підхід, показаний у цьому прикладі, створить дві прямокутні області різної висоти та кольору.

Основною особливістю наведеного підходу є те, що при зменшенні вікна браузера до 750 пікселів і менше, шари розташовуються вертикально один під одним (рис. 1). Іншими словами, макет «розсипається» на окремі блоки.

Рис. 1. Вигляд макету при зменшенні розміру вікна браузера

Щоб подібна ситуація не траплялася, слід скористатися властивістю margin.

Додавання margin для створення двоколоночного макету

Знову скористаємося властивістю float, щоб розмістити колонки поруч, але додамо його лише для першого шару. При цьому у стилі другого шару слід встановити властивість margin-left, значення якої дорівнює ширині лівої колонки. Але тут є один хитрість – ширину правої колонки задавати не можна, оскільки це призведе до перенесення блоків у браузері Internet Explorer при зменшенні вікна браузера. Саме цього ми намагаємося уникнути. Тому загальну ширину макету встановимо за допомогою ще одного шару, назвемо його container, а решта шарів будуть розташовуватися всередині нього (приклад 2). У цьому випадку ширину правої колонки можна не задавати, оскільки вона буде займати всі доступне простір.

Приклад 2. Двоколоночний макет 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Дві колонки</title>
  <style type="text/css"> 
   #container {
    width: 750px; /* Загальна ширина колонок */ 
   }
   #leftcol { /* Ліва колонка*/ 
    width: 200px; /* Ширина шару */ 
    float: left; /* Стиснення з сусіднім шаром */ 
    color: white; /* Колір тексту*/ 
    background: #008000; /* Колір фону лівої колонки */ 
   }
   #rightcol { /* Права колонка*/ 
    background: #e0e0e0; /* Колір фону правої колонки */ 
    margin-left: 200px; /* Відступ зліва */ 
   } 
   p {
    padding: 10px; /* Відступи навколо тексту */ 
    margin: 0;  /* Видаляємо відступи */ 
   }
  </style>
 </head> 
 <body> 
  <div id="container">
   <div id="leftcol"><p>...</p></div>
   <div id="rightcol"><p>...</p></div> 
  </div>
 </body>
</html>

При такому способі верстки при зменшенні ширини вікна браузера шари залишаються на своїх початкових місцях, але з'являється горизонтальна смуга прокрутки. Також спостерігаються невеликі різниці в браузерах, пов'язані з полями та відступами навколо тексту, розташованого всередині колонок. Проте ці відмінності не суттєві і легко коригуються за допомогою властивостей padding та margin.

Якщо після колонок планується розмістити ще один шар знизу, то для нього слід використовувати стильову властивість clear. Справа в тому, що браузери різним чином розташовують цей нижній шар, тому слід скасувати дію обтікання, що clear саме і робить (приклад 3).

Приклад 3. Застосування властивості clear

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Дві колонки</title>
 </head>
 <body> 
  <div id="container">
   <div id="leftcol">...</div>
   <div id="rightcol">...</div> 
  </div>
  <div style="clear: left">...</div>
 </body>
</html>

Стиль для цього прикладу залишається незмінним і лише додається тег <div> з атрибутом style="clear: left". Значення властивості clear зазвичай співпадає зі значенням float.

Резюме

При верстці двоколоночного макету дуже часто використовується властивість float, яка додається до кожного шару. Хоча цей атрибут призначений для створення обтікання, завдяки своїй універсальності він вже давно взятий на озброєння верстальників. Принцип його застосування наступний. Навколо шару при додаванні float створюється обтікання, але оскільки ширина кожного шару жорстко задана, то шари розташовуються не один під одним, а поруч по горизонталі. Таким чином і формуються колонки макету.

Такий спосіб створення багатоколоночного макету має певний недолік, який проявляється в тому, що при зменшенні вікна браузера до певного розміру, колонки «перескакують» одна під одну. Щоб цього уникнути додатково використовують стильову властивість margin-left, додаючи його до правої колонки. У такому випадку шари залишаються на своїх початкових місцях, незалежно від розмірів вікна браузера.

веб-розробка

Часті запитання