Даний невеликий урок по CSS присвячений тим, хто хоче освоїти блокову верстку. Сьогодні ми розберемо таке питання, як створення 2-х колонок однакової висоти за допомогою блоків, а не таблиць.
Це вміння застосовується практично скрізь, навіть верстаючи стандартний макет з 2-х колонок, ви зіткнетеся з цією проблемою, якщо ви будете верстати блоками. Так само цей урок спрямований на розвиток розуміння самих принципів блокової верстки.
![Створення 2-х колонок однакової висоти на css (висоти) Створення 2-х колонок однакової висоти на css](https://images-on-off.com/images/162/sozdanie2xkolonokodinakovoyvisotinacss-b596f158.png)
![Створення 2-х колонок однакової висоти на css (дорівнюватиме 700px) Створення 2-х колонок однакової висоти на css](https://images-on-off.com/images/162/sozdanie2xkolonokodinakovoyvisotinacss-bf67055a.png)
Подивіться на зображення нижче. За допомогою таблиць такий результат досягається автоматично.
![Створення 2-х колонок однакової висоти на css (висоти) Створення 2-х колонок однакової висоти на css](https://images-on-off.com/images/162/sozdanie2xkolonokodinakovoyvisotinacss-24632404.jpg)
Але з блоками все інакше. Подивіться на 2 колонки зверстаний блоками.
![Створення 2-х колонок однакової висоти на css (однаковою) Створення 2-х колонок однакової висоти на css](https://images-on-off.com/images/162/sozdanie2xkolonokodinakovoyvisotinacss-40fede70.jpg)
Чому ж так відбувається?
Відповідь проста. Справа в тому, що таблиця це цілісний елемент, в якому кожна клітинка залежить від іншої, тому вона і триває далі. Блок ж це окремий, самостійний елемент і він ніколи не буде вести себе як таблиця!
Так що домагатися такого ж результату за допомогою блоків, якого домоглися і від таблиць ми будемо, використовуючи маленькі хитрощі.
Їх багато, але сьогодні я приведу саму просту і зрозумілу новачкові хитрість. Ми просто помістимо обидва блоки в ще один блок, який їх об'єднає, і цього блоку поставимо таке фон, який нам потрібен. Так як загальний блок буде тривати до кінця найбільшого з блоків, його фон буде поширюватися вниз.
Подивимося, як це виглядає на схемі.
![Створення 2-х колонок однакової висоти на css (створення) Створення 2-х колонок однакової висоти на css](https://images-on-off.com/images/162/sozdanie2xkolonokodinakovoyvisotinacss-67cb825d.jpg)
Тепер давайте переходити безпосередньо до коду.
Тепер розберемо що до чого.
![Створення 2-х колонок однакової висоти на css (створення) Створення 2-х колонок однакової висоти на css](https://images-on-off.com/images/162/sozdanie2xkolonokodinakovoyvisotinacss-d7416465.jpg)
Далі створимо фонове зображення. Ширина головного блоку у нас буде дорівнює 700px. Отже і ширина фонового зображення буде дорівнює 700px. Висоту можна задавати будь-яку в залежності від того, який у вас фон.
Я створив таке зображення і назвав його textured.gif
Тепер дивимося, що вийшло в CSS
Тепер якщо ми подивимося на результат, то побачимо такі:
![Створення 2-х колонок однакової висоти на css (створення) Створення 2-х колонок однакової висоти на css](https://images-on-off.com/images/162/sozdanie2xkolonokodinakovoyvisotinacss-770f359a.jpg)
На закінчення даного уроку, для кращого розуміння я приведу приклад зі зміненим фоновим зображенням.
Я створив ось таке фонове зображення і назвав його textured1.gif
Природно відповідним чином змінив одне з властивостей в CSS.
Ось що вийшло:
![Створення 2-х колонок однакової висоти на css (дорівнюватиме 700px) Створення 2-х колонок однакової висоти на css](https://images-on-off.com/images/162/sozdanie2xkolonokodinakovoyvisotinacss-6c76e0fe.jpg)
P.S. від Максима: даний ефект не працює у мене в Firefox.
5 останніх уроків рубрики "CSS"
Невеликий ефект з інтерактивною анімацією букв.
Невеликий концепт кумедних підказок, які реалізовані на SVG і anime.js. Крім особливого стилю в прикладі реалізована анімація і трансформація графічних об'єктів.
Експеримент: анімовані SVG літери на базі бібліотеки anime.js.
Прикольний експеримент веб сторінки відображення якої здійснюється "від першої особи" через сонцезахисні окуляри.
Експериментальний скрипт розкривається навігації.
![Створення 2-х колонок однакової висоти на css (однаковою) Створення 2-х колонок однакової висоти на css](https://images-on-off.com/images/162/sozdanie2xkolonokodinakovoyvisotinacss-f75a8539.jpg)
За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!
![Створення 2-х колонок однакової висоти на css (однаковою) Створення 2-х колонок однакової висоти на css](https://images-on-off.com/images/162/sozdanie2xkolonokodinakovoyvisotinacss-005bfa4e.jpg)
![Створення 2-х колонок однакової висоти на css (дорівнюватиме 700px) Створення 2-х колонок однакової висоти на css](https://images-on-off.com/images/162/sozdanie2xkolonokodinakovoyvisotinacss-cd566a5c.png)
Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!
![Створення 2-х колонок однакової висоти на css (колонок) Створення 2-х колонок однакової висоти на css](https://images-on-off.com/images/162/sozdanie2xkolonokodinakovoyvisotinacss-5292bb73.png)
Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.
![Створення 2-х колонок однакової висоти на css (однаковою) Створення 2-х колонок однакової висоти на css](https://images-on-off.com/images/162/sozdanie2xkolonokodinakovoyvisotinacss-dbf3c2fb.png)
Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!