Ошибка высоты столбцов CSS

Question

Я пытаюсь создать простую систему столбцов, которую можно использовать на сайте и встраивать в любой элемент, который является кросс-браузерным и простым в использовании. Я пытаюсь сделать это с чистым CSS, если это вообще возможно. Все работает, кроме границ, которые не совпадают.

Все, что я пытался сделать, не сработало.

Посмотреть css здесь:

http://jsfiddle.net/JamesKyle/8H7hR/

Версия скрипта:

http://jsfiddle.net/JamesKyle/8H7hR/3/

Answer 1

Вы используете display: table-cell для вашего диапазона так:

.columns .col {
    display: table-cell;
    position: relative;
    width: 49.9999%;
    text-align: justify;
    border-left: 1px solid #ccc;
    background: #f5f5f5;
}

Проверить эту скрипку http://jsfiddle.net/8H7hR/5/

Answer 2

Вот статья, которая должна помочь: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks