Резиновая div верстка  предполагает автоматический расчет ширины блока или всего шаблона браузером, в зависимости от размера экрана пользователя.  Такой вид блочной модели расположения часто используют в разработке крупных порталов и сайтов с преимущественно одним видом контента.

Для создания эффекта растяжки шаблона и получения резиновой div верстки размер блока указывают в процентах. Распознав такое свойство, браузер определяет размеры экрана и в соответствии со значением процентов расширяет модуль. Естественно, вслед за границами блока растягивается и вставленный в него контент, что может произвести к неправильному размещению текста, его переносов и последовательности. Впрочем такая модель позиционирования элементов позволяет максимально рационально использовать рабочее окно посетителя. Впрочем, достаточно редко в шаблонах используется полная резиновая div верстка, то есть такая модель расположения для всех элементов шаблона.

Более рационально оставлять процентное значение для одной из колонок или контент-зоны, в таком случае дизайн сайта выглядит более естественно, а верстальщик получает минимальное представление о том, насколько растянется текст. Чтобы иметь возможность контролировать растягивание сайта (или блока), стоит немного поработать над кодом шаблона. Для ограничения размеров «резинового» div-a можно задать свойства min-width и max-width в пикселях, также ради страховки стоит добавить margin: 0 auto; на случай если браузер посетителя проигнорирует свойства максимальной и минимальной ширины.

Подводным камнем является то, что такие свойства не работают в IE6, а значит для них необходим соответствующий css-хак. В интернете можно найти весьма полезное решение этой проблемы с помощью javascript, для этого нужно подключить сам JS-файл.

А вот содержание подключаемого ie.js:

window.attachEvent('onload', mkwidth); window.attachEvent('onresize', mkwidth);

var minwidth = document.getElementById("site").currentStyle['min-width'].replace('px', '');

var maxwidth = document.getElementById("site").currentStyle['max-width'].replace('px', '');

function mkwidth(){

document.getElementById("site").style.width = document.documentElement.clientWidth < minwidth ? minwidth+"px" : (document.documentElement.clientWidth > maxwidth ? maxwidth+"px" : "100%");

};

Особенностью резиновой div верстки является высокая требовательность к правильному обтеканию, без использования которого эстетически красивое размещение невозможно. Задание обычного text-align может не подойти во всех случаях, так как браузеры относят данное свойство исключительно к текстовой информации. Поэтому рекомендуется задавать размещение блока с помощью отступов (margin), равномерно отодвигая элемент от краев окна.

В целом резиновая div верстка обладает многими недостатками, которые усложняет жизнь и пользователю, и верстальщику. Но иногда приходится потрудиться ради хорошего результата.