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=”” мати не бажано.

  • class=”left”

    css
    .left{
    float:left;
    }

    Не використовуй inline стилі – пожалкуєш.

    А можна стовпці взяти в свої div і тоді взагалі не буде зв’язку при зміні висоти. Аналогічно до газетної верстки. КОнтроль висоти можна робити через min-height max-height, а текст

  • Богдан Гдаль

    @ podarok:
    Про стилі я знаю.. То для простоти розписав.. я пишу все в .css

    Про стовпці можна, але коли ти хочеш, шоб рядки починалися на одному рівні, то шо робити.. Взагалі ідеально було би найти шлях, щоби алгоритм стилю був для всіх однаковий. Щодо min-height та max-height, я це використовував, але ця річ так само не дає відповіді на потреби, коли тобі не тре мати блоки однакової висоти, або ти не можеш спрогнозувати їхню висоу взагалі…

  • Лисичка

    Навіть не намагаюся це зрозуміти, хіба за півтора метри підглянути в монітор:-)

  • Вам пощастило, що clear:both допоміг 🙂
    На тему колонок з float-ами є безліч постів, в яких описують як побороти цю проблему.
    В основному використовують таке рішення:

    .clearfix:after {
    content: “.”;
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
    }

    .clearfix {
    display: inline-block;
    }

    html[xmlns] .clearfix {
    display: block;
    }

    * html .clearfix {
    height: 1%;
    }

  • Богдан Гдаль

    @ zolotoy:
    Дякую за додаткові поради

  • Богдан Гдаль

    Ваше рішення не стосується ситуації, яка викладена у мене. Бо у вас li-блоки сталої висоти. У мене приклад протилежний. Тому Ваше “робоче рішення” цю проблему не вирішує.

  • Богдан Гдаль

    До речі, до юзера zolotoy. clearfix нажаль гірше себе поводить в цій ситуації..

  • Ок. А що до ситуації, коли перший блок буде за висотою більший ніж два четвертих у сумі?

  • Bohdan

    Ну там і йдеться про випадок, коли блоки нерівномірної висоти. Ідея в тому щоб незалежно від висоти речі, що йдуть в одному рядку, не вискакували куди не треба. Наступний рядок починається на рівні найнижчого краю якогось з блоків.
    P.S. Я вгорі переписав синтаксис.