Возникла необходимость сделать шаблон, отвечающий следующим условиям:
а. Три колонки.
б. Боковые колонки - фиксированной ширины, центральная тянется.
в. Высота всех колонок визуально одинакова, и тянется от низа header`а до верха пристыковнного к низу экрана footer`а.
г. Шаблон должен тянуться от 600 до 800 пикселей.
д. При высоком разрешении шаблон должен располагаться по центру окна, а не пристыковываться к левой стороне экрана браузера.
Пункты "а", "б", "г" никаких проблем не вызывают.
Для решения задачи, описанной в пункте "в", решил попробовать воспользоваться методом ложных колонок.
Для background`ов создал два изображения - orange_200 шириной 200px - для создания левой колонки и grey_800 шириной 800px - для создания правой колонки, в grey_800 первые 600 px картинки прозрачны, оставшиеся 200 - серая заливка.
Итак, левую колонку делаю путем замощения html: background: url(orange_200.gif) repeat-y;
Правую - путем замощения body: background: url(grey_800.gif) repeat-y 100% 0;
Ура. Выходит, центральная колонка тянется, замощения боковых никуда не деваются.
Но тут возникает проблема: пункт "д". Сейчас-то шаблон пристыковывается к левой границе экрана.
Соответственно, чтобы расположить его по центру, задаю для body margin`ы: margin: 0 auto 0 auto;
Но в этом случае orange_200 остается пристыкованной к левой границе экрана, соответственно, колонка уползает при увеличении ширины окна, что, впрочем, вполне ожидаемо. html-то тянется по ширине на всю область экрана браузера. Что делть? Елинственное, что мне пришло на ум, это перенести min-width, max-width и margin: 0 auto 0 auto от body к html. В нормальных браузерах после такого действия все отлично, соблюдены все условия. Ну, а IE6 теперь не рассчитывает минимальную и максимальную ширину, шаблон тянется на весь экран. Что делать?
Код:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"* "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">* <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta name="description" content="" /> <meta name="keywords" content="" /> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <style type="text/css"> *****{ *margin: 0; *padding: 0; *} html****{ *height: 100%; *min-width: 600px; *max-width: 800px; *margin: 0 auto 0 auto; *background: white url(orange_200.gif) repeat-y; *} body****{ *position: relative; *min-height: 100%; *background: url(grey_800.gif) repeat-y 100% 0; *} #header****{ *position: relative; *height: 100px; *background: #c0d0f1; *} #outer****{ *position: relative; *float: left; *width: 100%; *margin-right: -200px; *} #menu****{ *position: relative; *width: 200px; *float: left; *background: yellow; *padding-bottom: 110px; *} #bt****{ *background: #cef; *padding-bottom: 110px; *} #d3****{ *position: relative; *float: left; *background: #c0c0c0; *width: 200px; *padding-bottom: 110px; *} #fg****{ *visibility: hidden; *clear: both; *} #footer****{ *position: absolute; *height: 100px; *background: blue; *bottom: 0; *width: 100%; *} </style> </head> <body> <div id="header">header</div> <div id="outer"> *<div id="menu">menu</div> *<div id="bt">bt</div> </div> <div id="d3">d3</div> <hr id="fg" /> <div id="footer">footer</div> </body> </html>



