Верстка в 2 слоя и их позиционирование

dobriy-kot · November 7, 2008

Добрые друзья!

Обращаюсь к вам с вопросом, который не могу разрешить уже несколько дней...

Есть страница, сверстанная слоями:

Заголовок и подвал растягиваются в длину. Content - в длину и в высоту.

Слой mini является чем-то вроде боковой колонки. Его высота иногда меняется, а ширина - нет.

Вся проблема в том, что когда в слое content мало информации, слой mini наползает на подвал, перекрывая его!

Я никак не сумел исправить эту проблему. Пытался использовать табличку, запихнув content и mini в две соседние ячейки, но это лишь породило новые проблемы - т.к. в content'e часто находится преформатированное содержимое (тег <pre>). Пробовал позиционирование - absolute оставляет его независимым от других слоев, relative и inherit не работают...

Вот стили слоев:

#Page {
	min-width:855px;
	max-width:1290px;
}
#Head { 
	background:#e2e2e2;
	height:70px;
	margin:0;
}
#Content {
	padding: 135px 30px 100px 30px;
}
#Mini {
	width:170px;
	margin-top:20px;
	position:absolute;
	top:270px;
	right:10px;
}
#Footer {
	margin: 0 30px;
	border-top: 1px solid #bdd0ee;
	width: 100%;
}

Edited November 7, 2008 by dobriy-kot

Searcher · November 7, 2008

Что-то Вы намудрили... Вот рабочий код:

#Head { 
	background:#e2e2e2;
	height:70px;
}
#Content {
	background:#fff0ff;
	margin-right:170px;
}
#Mini {
	background:#f0ffff;
	width:170px;
	float:right;
}
#Footer {
	clear:both;
	background:#fffff0;
	border-top: 1px solid #bdd0ee;
}


</style>
</head>
<body>


<div id="Head">Head</div>
<div id="Mini">Mini<br><br><br><br><br><br><br><br><br></div>
<div id="Content">Content<br><br><br><br></div>
<div id="Footer">Footer</div>

Всякие padding и т.п. уже сами установите. Только не трогайте порядок дивов в боди.

Sign In

Верстка в 2 слоя и их позиционирование

Question

dobriy-kot

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

Searcher

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information