3-х колоночный резиновый макет, минимальная и максимальная ширина

abc_ua · August 25, 2010

есть сайт с примерно таким шаблоном http://studioad.ru/divit/divit_4444.txt : плавающие блоки по бокам и резиновый центр.

Проблема при использовании шаблона состоит в том, что если в средней колонке использовать свойство clear, то контент в этой странице опускается до уровня, где заканчивается правая колонка: <div style="clear:both;"> , нормальный вид

Знаю, можно вместо clear использовать overflow, но это лишь способ обойти проблему, мы теряем возможность использовать clear

Вопрос: это несовершенность шаблона, если да, то можно ли ее устранить? Существует другой, аналогичный по функционалу, шаблон без этой проблемы?

klierik · August 25, 2010

#center {overflow: hidden;}
#center div.ownClass {clear: both;}

abc_ua · August 25, 2010

klierik, вы забыли сказать о height:1%; (посмотрел в одном из сайтов вашего портфолио)

вроде бы все отлично, проблема решена(klierik, огромное вам спасибо!), но куда же без любимого ie6, который снова приносит сюрпризы: не понятно откуда появились отступы в 3px слева и справа от content, при чем они не убираются отрицательным margin, хелп!!!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style>
body {
margin:0;
padding:0;
}
#container {
min-width:1000px;
max-width:1050px;
margin:0 auto;
padding:0;
}
#header {
background:#FFFFCC;
margin:0;
padding:0;
overflow:hidden;
}
#left {
background:#CCCCCC;
margin:0;
padding:0;
float: left;
width:210px;
}
#right {
background:#CCCCCC;
margin:0;
padding:0;
width:210px;
float:right;
}
#content {
height:1%;
margin:0;
padding:0;
overflow:hidden;
}
#content_body {
background:#999999;
margin:0 0px 0 0px;
padding:0;
}
#footer {
background:#FFFFCC;
overflow:hidden;
}
.clear {clear:both;}
</style>

</head>

<body>

<div id="container">
	<div id="header">HEADER</div>
	<div class="clear"></div>
	<div id="left">LEFT</div>
	<div id="right">RIGHT</div>
	<div id="content">
		<div id="content_body">
			<div class="clear"></div>
			CONTENT
		</div>
	</div>
	<div class="clear"></div>
	<div id="footer">FOOTER</div>
</div>

</body>
</html>

Edited August 25, 2010 by abc_ua

klierik · August 26, 2010

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
	body {
		margin:0;
		padding:0;
	}
		#container {
			min-width:1000px;
			max-width:1050px;
			margin:0 auto;
			padding:0;

			_width: 1000px;	/* for ie6 */
		}
			#header {
				background:#FFFFCC;
				margin:0;
				padding:0;
				overflow:hidden;
			}

			div.case {overflow:hidden; _zoom:1;}	/* zoom for ie6 */

				#left {
					background:#CCCCCC;
					margin:0;
					padding:0;
					float: left;
					width:210px;
				}
				#right {
					background:#CCCCCC;
					margin:0;
					padding:0;
					width:210px;
					float:right;
				}
				#content {
					/*height:1%;*/
					margin:0;
					padding:0;
					overflow:hidden;
				}
				#content_body {
					background:#999999;
					margin:0 0px 0 0px;
					padding:0;
				}
			#footer {
				background:#FFFFCC;
				overflow:hidden;
			}
			.clear {clear:both;}
</style>


</head>

<body>

<div id="container">

	<div id="header">HEADER</div>

	<!-- content case -->
	<div class="case">

		<div id="left">LEFT</div>
		<div id="right">RIGHT</div>

		<div id="content">
			<div id="content_body">
				CONTENT
			</div>
		</div>

	</div>
	<!-- /content case -->

	<div id="footer">FOOTER</div>

</div>

</body>
</html>

abc_ua · August 29, 2010

Спасибо!

Selen · May 5, 2011

Создаём отдельную тему, со скриншотами и объяснением задачи.

Edited May 5, 2011 by psywalker
Создание темы в чужих постах.

psywalker · May 5, 2011

klierik

Лёх, на будущее, пожалуйста, помещай код в спец. теги

Sign In

3-х колоночный резиновый макет, минимальная и максимальная ширина

Question

abc_ua

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

klierik

Link to comment

Share on other sites

abc_ua

Link to comment

Share on other sites

klierik

Link to comment

Share on other sites

abc_ua

Link to comment

Share on other sites

Selen

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information