Разметка для резинового по ширине макета

В последнее время я много думал о разрешениях экрана и над тем, является ли использование веб-сайтов с резиновой шириной лучшим способом адаптации веб-сайта под разрешения экранов пользователей. При использовании веб-сайтов со статичной шириной, приходиться делать выбор.

Например: оптимизировать веб-сайт под 800рх (1024px – актуально в наше время) ширину (наименьший общий знаменатель) и отказаться тем самым от нескольких сотен пикселей для пользователей с большими экранами (речь идет о пустом пространстве, которое образуется при просмотре такого сайта на больших экранах). Либо оптимизировать сайт под ширину 1024px (1280px – наше время), тем самым создавая для 800-px пользователей горизонтальную прокрутку.

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

• Работать во всех основных браузерах
• Сжиматься до 780рх (1004px)
  Пользователям с разрешением 800х600 горизонтальная прокрутка не понадобится!
• Расширяться до 1260рх
  Сайт автоматически подстраивает свои размеры для пользователей с разрешением 1280x768 (и для тех, у кого разрешения - по ширине - экрана лежит в пределах 800px - 1280px)
• Такая разметка подойдет для большинства пользователей. Разметку легко можно сделать большей, следует, однако, помнить о том, как длина строки влияет на читабельность. Мало кому захочется читать текст, длина строк которого равна 1980рх.
• Высота правой колонки равна высоте блока с основным контентом.
• Контент страницы остается центрированным при увеличении разрешения экрана.

Основные моменты по верстке:

Так как свойства max-width и min-width понимается браузером (IE7), но с некоторыми оговорками то понадобится - Хак для IE7:

CSS

#page-wrap {
width:expression(document.body.clientWidth < 782? "780px" :
            document.body.clientWidth > 1262? "1260px" : "auto");
}

Основному блоку-обертке понадобятся следующие объявления:

CSS

   #page-wrap {
	min-width: 780px;
	max-width: 1260px;
	margin: 10px auto;
	}   

Двухколоночный резиновый макет:

Полученное решение я тестировал в Firefox, Safari, Opera и InternetExplorer 6 и во всех браузерах оно работает без проблем.

Источник