Использование display: table — зло?

Question

[quex]

Верстаю резиновую сетку, местами необходимо колонкам задавать фиксированную ширину (например, 2 колонки: сайдбар 300px, все остальное пространство - вторая колонка).

.row {
	display:table;
	width:100%;
}
.col {
     display:table-cell;
}

Справляется на ура, отдельно просто задаем ширину нужному блоку и все прекрасно тянется и при сжатии по ширине ничего никуда не уезжает.

В сети повсюду мануалы с классическим float. Почему практически нигде не используется вышеприведенный способ? В чем подвох? Только ли неработоспособность этого метода в IE<8?

Answer 1

[stas]

Потому что в сети куча старой информации, переписанной и перепощенной 100500 раз.

Если вкратце, и отбрасываем flex'ы:

Есть float - он справляется на ура, нужно только не забывать его очищать.

Есть inline-block - он прекрасен, до тех пор пока вы не сталкиваетесь с проблемой появления отступов между колонками (пробелов между блоками) - вам приходится обнулять font-size у row + display table для сафари на него вешать, а после объявлять font-size у дочерних col'а элементов (хотя есть и другие способы, но этот оптимальный).

А можно и просто верстать теплыми ламповыми "таблицами", только по-человечески, на display table, table-row, table-cell. Нюансы - нюансы таблиц, больше к сожалению не подскажу, на деле сам сильно не завязывался на таблицах, всех нюансов не знаю.

Попробуйте каждый, почитайте познакомьтесь и выберите тот, что вам удобнее

Answer 2

[Сергей Протько]

Если не смущает поддержка старых версий браузеров, то почему сразу не flex-box?

Comments

[Сергей Протько]

@Aingis вообще для такого простого случая есть полифил для IE. Ну и есть надежда что допилят полифил под новую версию спеки.

[quex]

спасибо, решение интересное, впервые узнал про него. но 32% браузеров, которые не поддерживают - многовато :(

Answer 3

[Виталий Желтяков]

Подвох в том, что Вы верстаете таблицу div-ами.

Comments

[Юрий Лобанов]

То есть Вы считаете, что надо использовать таблицу?

[quex]

наоборот, насколько я понял. но что в этом плохого? я не говорю про использование присущих таблицам тегов table, tr, td при верстке, это разумеется выглядит криво.
При использовании дивов, различия между привычным float и вышеописанным методом получаются только в css, причем кода получается даже меньше, т.к. не нужно дописывать хаки типа row:after {clear:both} и т.д., автоматически все тянется как положено, не выходит за границы, без лишних телодвижений. + появляются возможности задавать фиксированные блоки с min-width, max-width без ущерба "резиновости" макета.

[Юрий Лобанов]

@quex я спрашиваю про таблицы, а не про display: table, так что не распыляйтесь. Против display: table я ничего не имею, кроме не поддержки его старыми браузерами. Если этот момент не беспокоит - то пожалуйста.