Резиновый трехколоночник и ложные колонки.

skatadov · February 13, 2009

Возникла необходимость сделать шаблон, отвечающий следующим условиям:

а. Три колонки.

б. Боковые колонки - фиксированной ширины, центральная тянется.

в. Высота всех колонок визуально одинакова, и тянется от низа 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" />

<!--[if IE 6]><script type="text/javascript" src="minmax.js"></script><![endif]-->

<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	{
	height: 100px;
	background: #c0d0f1;
	}

#outer	{
	float: left;
	width: 100%;
	margin-right: -200px;
	}
#menu	{
	width: 200px;
	float: left;
	background: yellow;
	padding-bottom: 110px;
	}
#bt	{
	padding: 0 200px 110px 200px;
	}

#d3	{
	float: left;
	background: #ccc;
	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>

Sign In

Резиновый трехколоночник и ложные колонки.

Question

skatadov

Link to comment

Share on other sites

0 answers to this question

Recommended Posts

Join the conversation

Обсуждения

Forums

Important Information