Я створюю сторінку для Хопера, одного з
анімаційних персонажів сайту Khan Academy.

Вона містить в собі зображення, кілька класних
посилань та абзац.

Я думаю, що це зображення Хопера 
матиме кращий вигляд,

якщо розмістити його біля абзацу. 
Тому я збираюсь вирізати його

і вставити ось тут.

Хм. Добре, це виглядає не настільки добре,
наскільки я очікувала.

Текст починається знизу зображення.

Я сподівалась, що текст буде
біля зображення,

так як в газетах чи журналах.

Для цього нам потрібна нова
властивість CSS: "float" (обтікання).

Це спосіб розміщувати елементи
один навколо одного,

і він просто ідеальний, для того щоб
зробити обтікання зображення текстом.

Тому ми йдемо вгору до правила "pic"
і пишемо: "float:".

Щоб написати значення, нам потрібно
вирішити, з якого боку буде зображення:

справа чи зліва від тексту.

Спробуймо зліва.

Чудово. Ідеально!

Хоча... не зовсім ідеально,

тому що тест розміщений
надто близько до зображення.

Ви пам'ятаєте, яку властивість 
ми маємо використати,

щоб відділити текст від зображення?

Це частина блокової моделі,
яку ми щойно вивчили.

Зовнішні відступи. (Margin).

Додамо відступи справа та
відступи знизу до зображення,

щоб дати йому трохи більше
вільного простору.

Ах, добре, так значно краще.

Не лише зображення можуть
обтікатися текстом.

Наприклад, нам потрібно щось таке,
як бокова панель.

Як щодо цього списку посилань?

Ми можемо взяти цей список
і розмістити його справа.

Додаймо правило для #hopper-links

і розмістімо його справа так, щоб його
обтікав інший текст.

Добре, текст його обтікає, але
посилання забирають надто багато місця,

більше, ніж я б хотіла.

Обмежмо ширину до 30%,

щоб посилання завжди займали 30%
сторінки,

а решта сторінки, 70%, була заповнена
іншими елементами.

Загалом, щоразу, як ви використовуєте
властивість float для , ви мусите додавати ширину.

Оскільки в іншому випадку 
займатиме все вільне місце,

і жоден з елементів не зможе 
його обтікати.

Здається, тут також потрібний 
відступ зліва.

Добре.

Тепер погляньте на нижній колонтитул
з контактами Хопера внизу сторінки.

Сталось щось дивне, оскільки він
перекриває нашу бокову панель.

І це тому, що він обгортає інші елементи.

Однак ми не хочемо, щоб колонтитул
щось обгортав.

Ми хочемо, щоб він завжди був
з самого низу,

оскільки це нижній колонтитул.

Щоб він нічого не обгортав, ми використаємо
властивість "clear" (очищення).

і напишемо "clear: both".

Хах.

Ми можемо використати
"clear: left" або "clear: right",

якщо ми хочемо, щоб він не огортав

лише елементи зліва чи справа.

Але переважно нам потрібно,
щоб він взагалі нічого не огортав,

тому ми кажемо "clear: both".

Тепер це виглядає яксправжня веб-сторінка.

Ми маємо основну частину, бокову панель
та нижній колонтитул.

Насправді, тепер ви вже знаєте властивості
CSS, які створюють розмітку більшості сторінок.

Додайте до  ширину, висоту,
зовнішні та внутрішні відступи,

обтікання текстом або його відміну,

і всі види розміток сторінок
будуть до ваших послуг.

Переклад на українську мову: Зоряна Гаврилюк, рев'юер: Юлія Білаш, Благодійний фонд "MagneticOne.org"