1. Як розташувати кілька блоків div в ряд? Як заборонити обтікання блоків <div>? Дуже часто доводиться...
2. Приклад горизонтального розташування декількох блоків <div>

Як розташувати кілька блоків div в ряд? Як заборонити обтікання блоків <div>?

Дуже часто доводиться розташувати кілька блоків <div> в однин ряд в горизонтальній площині. Наприклад один блок <div> зліва, а інший праворуч і щоб вони були в одному потоці читання браузером. Або при виведенні зображень з бази даних, наприклад аватарів, потрібно щоб картинки були всі в один ряд. Або при створенні горизонтального меню, потрібно пункти розташувати в ряд. Одним словом - потрібно позиціонувати блоки <div>.

Робиться це дуже просто, за допомогою параметра float: ...; , Яким будемо задавати обтікання блоку справа, або зліва, кому що потрібно. Один важливий момент - при такому позиціонуванні декількох блоків <div>, потрібно щоб загальна ширина сторінки була більше суми ширини блоків, інакше блоки будуть один під іншим, хоча і з різних сторін вікна !!!

Як заборонити обтікання блоків <div>

При позиціонуванні блоків, часто трапляється так, якщо дозволено обтікання, то текст може підскакувати вгору, або між блоками зміщуватися. Вирішується така проблема створенням блоку з забороною обтікання з усіх боків. Такий div потрібно зробити розміром по висоті в 1 піксель і ширині 100%.

І при потребі, такими порожніми блоками DIV можна заборонити обтікання всіх внутрішніх блоків, зверху і знизу, які потрібно розташувати у ряд.

Приклад горизонтального розташування декількох блоків <div>

Для такого розташування блоків - всім div-ам присвоюємо параметр float: left; і радіємо життю! Для прикладу раположен кілька блоків <div> по горизонталі:

DIV - 1

DIV - 2

DIV- 3

DIV - 4

DIV - 5

DIV - 6

Якщо потрібно розташувати два великі блоки в один ряд, тоді потрібно параметрам float: ...; задати значення left для одного і right для іншого. Дуже важливо, щоб загальна ширина блоків не перевищувала ширину сторінки, інакше нічого не вийде і один блок зміститися в потрібну сторону, але розташовуватися буде під сусіднім !!!