У блокової верстці, до сих пір залишається актуальною проблема позиціонування колонок. У цій статті я розповім, як можна маніпулювати становищем і висотою стовпців з мінімальними зусиллями.
Наприклад, у нас в макеті є дві колонки - перша гумова, з контентом, а інша фіксована - з блоком навігації та іншої другорядною інформацією.
Я не є корифеєм блокової верстки, і подібне завдання мені здалася досить нетривіальною. Якщо помістити код сайдбара до основного контенту, то проблема легко вирішується традиційними margin і float. Але мені хотілося, щоб основний контент знаходився в коді раніше, ніж другорядна інформація.
Спершу я вирішив проблему «в лоб», за допомогою таблиць.
З таблицями все працювало і вирівнювалося на рідкість просто, як в старі добрі часи. Але використання таблиць в даному контексті є семантично невірним.
Якось, в черговий раз повернувшись до вирішення цієї проблеми, я згадав, що у css-властивості display є атрибути table і table-cell. При заданому display: table. елемент матиме властивості таблиці, а display: table-cell говорить браузеру, що елемент потрібно інтерпретувати, як табличну осередок.
Подібний хак дозволяє зберегти семантику верстки, спростивши при цьому процес позиціонування колонок до мінімуму. При такому розкладі можна швидко створити будь-яку кількість вертикальних колонок однакової висоти, без зайвих трудовитрат і шаманства з margin і float.
Рейтинг - 5 Голосів - 8