Порада для програмерів-верстальників. Як позбутися проблеми з перескакуванням при різновисоких колонках у div.верстці...
При верстці таблицями цієї проблеми не виникало:

1
2
3
4
5
6
7
8
9
10
11
12
13

<table border="0">
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody></table>

Цей код давав нам змогу мати те, що ми намагаємося добитися div'ами.

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

div'и дозволяють це зробити шляхом створення однакових за шириною блоків:

1
2
3
4
5
6

<div style="float:left;"></div>
<div style="float:left;"></div>
<div style="float:left;"></div>
<div style="float:left;"></div>
<div style="float:left;"></div>
<div style="float:left;"></div>

Але!!! Якщо один з блоків має задовгий текст, то станеться отаке:

1
2
3
4
5
6

<div style="float:left;"></div>
<div style="float:left;"></div>
<div style="float:left;"></div>
<div style="float:left; clear:both;"></div>
<div style="float:left;"></div>
<div style="float:left;"></div>

Донедавна я не міг вирішити проблему. Навіть головна сторінка мого сайту має мала таку ваду... Коли текст завеликий, то він вилазив за межі блоку. Бо я, остерігаючись, що блок не перескочив, примусово йому присвоїв певну висоту. Це незручно, бо не можна довший текст додати до вступу...

Сьогодні знайшов вирішення.

Все дуже просто... Для того, щоб четвертий блок починався з нового рядка не зважаючи ні на що, ми обрубуємо обтікання третього останнього блоку і примусово вказуємо четвертому початися з нового рядка:

Ніби все правильно. Якщо не так — підправте.

P.S. Дехто висловлював зауваження, що css-властивості прописані прямо в коді. Зразу зауважу, що приклад наведений для наочності і через те все прописане прямо в рядку. Хоча, з теперішніми вимогами до верстки, треба чітко розділяти сам код і css, тому рядків на зразок style="" мати не бажано.

Ключові слова: div, верстка, дизайн