Вопрос по резиновому 3х колоннику.

Eirene · May 29, 2010

Нашла в сети шаблон 3х колонного макета на DIV'ах. И всем вроде бы хорош, но в IE 6 сразу появляется горизонтальная полоса прокрутки.

Подскажите, пожалуйста, как ее убрать.

http://blog.sjinks.pro/test/3col/3col_h100.html

код шаблона:

<!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>Three Column Liquid Layout</title> 
	<style type="text/css"> 
html {
	overflow: auto;
	background: #800000;
}

html:not(:nth-child(1)) { overflow: visible; }

html, body {
	margin: 0;
	padding: 0;
	border: 0;
	width: 100%;
	height: 100%;
}

body {
	font: 14px/120% Verdana, Tahoma, Arial, Helvetica, sans-serif;
	position: relative;
	min-width: 640px;
	width: 90%;
	margin: 0 auto;
}

#header {
	height: 3em;
	background: red;
	color: #FFF;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 1000;
	left: 0;
}

.column {
	padding-top: 3em !important;
}

#container {
	padding-left: 220px;
	padding-right: 200px;
	overflow: hidden;
	float: left; /* IE 5.01 */
	float/**/: none;
	height: auto !important;
	height: 100%;
	min-height: 100%;
	background: lime;
	position: relative;
}

* html #container { overflow: visible; }

#left, #right, #content {
	float: left;
	position: relative;
	padding-bottom: 3em !important;
}

/*\*/
#left, #right, #content {
	padding-bottom: 1000em !important;
	margin-bottom: -997em !important;
}
/**/

@media all and (min-width: 0px) {
	#left, #right, #content {
		margin-bottom: 0 !important; 
		padding-bottom: 3em !important;
	}

	#left:before, #right:before, #content:before {
		content: 'EasyClearing';
		display: block;
		background: inherit;
		padding-top: 1000em !important;
		margin-bottom: -1000em !important;
		height: 0;
	}
}

#container:after {
	content: 'EasyClear'; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}

#container { display: inline-block; }
/*\*/
#container { display: block; }
/**/

#left {
	width: 220px;
	background: cyan; /* url(images/tile-2.jpg) repeat; */
	margin-left: -100%;
	right: 220px;
}

* html #left {
	left: 200px;
}

#right {
	width: 200px;
	background: yellow; /* url(images/tile-3.jpg) repeat; */
	margin-right: -100%;
}

#content {
	width: 100%;
	background: #CCC; /* url(images/tile-1.jpg) repeat; */
}

#footer {
	height: 3em;
	color: #FFF;
	background: green;
	position: relative;
	z-index: 1000;
	margin-top: -3em;
	width: 100%;
}
    </style> 
</head> 
<body> 
	<div id="header"> 
		Header
	</div> 
	<div id="container"> 
		<div id="content" class="column"> 

		</div> 

		<div id="left" class="column"> 

		</div> 

		<div id="right" class="column"> 

		</div> 
	</div> 
	<div id="footer">Footer</div> 
</body> 
</html>

psywalker · May 30, 2010

1) Ссылка битая.

2) У меня в ИЕ6 всё хорошо, никакой полосы.

Sign In

Вопрос по резиновому 3х колоннику.

Question

Eirene

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information