опять 2 колонки

dber · February 12, 2009

Столкнулся с проблемкой... вроде обычный двухколончатый макет, но не знаю как сделать так, чтобы колонки были одной высоты, которая бы зависела от наполнения...

т.е. 2 колонки вели себя как колонки таблицы и могли растягивать вниз общую нижнюю границу... В моем коде граница может растягиваться только в зависимости от наполнения правой колонки, а вот если в левой колонке больше контента, то он за границу лезет... Может есть у кого-то мысли или делал кто-то... Таблицей сделать можно легко, но хочется css и дивы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
	<title>.::Компания Мэйпл::. - 1C:Франчайзинг</title>

	<meta http-equiv="content-type" content="text/html" charset="Windows-1251"/>
	<style type="text/css">
		html,body{height:100%;margin:0px; padding:0px;}
		body{
			border:0px;
			padding:0px;
			margin:0px;
			background: #FFF; color: #383E4A;
			font: 12px Arial,sans-serif;
			height:100%;
			width:100%;
		}
		#mainsite{height:100%;width:100%;display:table;margin-bottom:-40px; }
		#mainsite div#mainsite1{padding-bottom:40px;}
		#footer {height:40px;}



		#body_conteiner{min-width:1020px; display:block;width:100%;border:1px solid white; background:red repeat-y url();border:2px solid gray;}
		#left_column{width:200px;float:left;margin-right:-200px; padding:0px 0px 0px 0px; }
		#content{margin-left:200px; padding-right:10px;padding-left:10px;background:green;}

	</style>

</head>
<body>
<div id="mainsite"><div id="mainsite1">



	<div id="body_conteiner">
		<div id="left_column">левоосновное</div>
		<div id="content">dghdfghd<br>fgsdfgsf</div>
	</div>
	<br><br><br><br><br>

	<div id="body_conteiner">
		<div id="left_column">левоосновное<br>fgsdfgsf</div>
		<div id="content">dghdfghd</div>
	</div>


</div></div>
<div id="footer">
	Подвал
</div>
</body>
</html>

Great Rash · February 12, 2009

<!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" xml:lang="en" lang="en">

<head>
	<title></title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />

	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		div#left {
			float: left;
			background: #f00;
		}

		div#right {
			background: #0f0;
			border-left: #f00 200px solid;
		}

		div#footer {
			background: #00f;
			color: #fff;
		}

		.clear {
			clear: both;
		}

		p {
			padding: 5px;
		}
	</style>
</head>

<body>

	<div id="left">
		<p>
			menu item<br />
			menu item<br />
			menu item<br />
		</p>
	</div>
	<div id="right">
		<p>
			content<br />
			content<br />
			content<br />
			content<br />
			content<br />
			content<br />
			content<br />
			content<br />
			content<br />
			content<br />
			content<br />
			content<br />
		</p>
	</div>
	<div class="clear"></div>
	<div id="footer">
		<p>
			footer footer footer footer footer footer footer footer footer footer footer footer 
		</p>
	</div>

</body>
</html>

dber · February 13, 2009

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

Sign In

опять 2 колонки

Question

dber

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

Great Rash

Link to comment

Share on other sites

dber

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information