25.01.2009

div vs table: проблема з колонками

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

Блок 1 Блок 2 Блок 3
Блок 4 Блок 5 Блок 6

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

divproblem1

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

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

  • Блок 1
  • Блок 2
  • Блок 3
  • Блок 4
  • Блок 5
  • Блок 6

css:

#mylist{padding:0; margin:0;}
#mylist li{float:left; display:block; width:100px;}

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

divproblem2

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

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

  • Блок 1
  • Блок 2
  • Блок 3
  • Блок 4
  • Блок 5
  • Блок 6

css:

#mylist{padding:0; margin:0;}
#mylist li{float:left; display:block; width:100px;}
#mylist .clear{clear:both;}

divproblem3

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

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

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