Три колонки на дивах

termit · February 8, 2010

Мучаюсь с трехколоночным макетом на дивах. Левая и правая колонка фиксированы по ширине (250px), высота auto. Центральная колонка занимает все оставшееся пространство. Проблема с относительным позиционированием правой колонки, float не срабытывает как надо, колонка относительно правой стороны встает как надо по горизонтали, но опускается под центральную по вертикали, что я только не делал..... Если ее позиционировать абсолютно, то все встает на свои места, но это не годится, т.к. в том случае если она длиннее остальных колонок, то уходит под подвал, т.к. в общем потоке она не существует.

Я новичек, подскажите как правильно???

вот HTML:

</div>

</div>

</div>

</div>

<div>

</body>

</html>

CSS:

html, body {

margin: 0;

padding: 0;

height: 100%;

width: 100%;

}

#head {

height: 400px;

width: auto;

background: url(images/head.png);

}

#header {

height: 400px;

width: 514px;

background-image: url(images/header.jpg);

}

#conteiner{

position: relative;

width: 100%;

overflow: hidden;

background: yellow;

}

#cont{

position: relative;

width: auto;

height: auto;

margin-left: 260px;

margin-right: 260px;

background: pink;

}

#leftcolums {

position: relative;

float: left;

background: blue;

height: auto;

width: 250px;

}

#rightcolums {

position: relative;

float: right;

margin-top: 0px;

background: green;

height: auto;

width: 250px;

}

#footer {

clear: both;

overflow: hidden;

position: relative;

height: 101px;

width: auto;

background: url(images/footer.gif);

}

Justnewone · February 8, 2010

Я новичек, подскажите как правильно???

Правильно воспользоваться поиском по форуму и утонуть в результатах "трехколоночный макет".

shvv · February 8, 2010

В html-коде поставь плавающие блоки первыми, а блок с контентом (с неопределенной шириной) - за ними.

termit · February 8, 2010

В html-коде поставь плавающие блоки первыми, а блок с контентом (с неопределенной шириной) - за ними.

Спасибо большое, блок встал на место! А почему так? хотелось бы понять на будущее...

shvv · February 8, 2010

Спасибо большое, блок встал на место! А почему так? хотелось бы понять на будущее...

Потому что блочные элементы занимают всю ширину окна. Поэтому блок с контентом вытесняет правую колонку, и она сдвигается на следующую строку.

Если я не прав, сейчас эксперты меня поправят)

Edited February 8, 2010 by shvv

termit · February 8, 2010

Потому что блочные элементы занимают всю ширину окна. Поэтому блок с контентом вытесняет правую колонку, и она сдвигается на следующую строку.
Если я не прав, сейчас эксперты меня поправят)

Но отступы то я указал, слева и справа! Если крайние колонки убрать, то видно что задуманное сбылось, контент занимает не все окно, по бокам пустое пространство. Еще пробовал вариант с отрицательными отступами, все бы хорошо, но 6 IE вообще не отображает такие блоки. А этот вариант вроде работает везде.

termit · February 11, 2010

Никто не знает?? :lol:

psywalker · February 11, 2010

Никто не знает??

zoom:1; попробуй

shvv · February 11, 2010

Никто не знает??

Не знает что?? :lol:

Great Rash · February 12, 2010

А почему так? хотелось бы понять на будущее...

Просто мое предположение: float - это не тоже самое, что и position: absolute;, поэтому, чтобы плавающий элемент перекрывал собой другие элементы, он должен быть выше в потоке, если же он будет стоять ниже остальных элементов, то наверх он не запрыгнет ибо с чего бы ему это делать?

Поэтому в двух/трех колоночных макетах колонки идут первыми, а центральный блок находится ниже.

psywalker · February 12, 2010

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

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
	<style type="text/css">
	*{ margin:0; padding: 0;}
		body { min-width: 500px;}
		div.head { height: 100px; background: blue;}
		div.right {
				float:left; 
				width: 200px;
				margin-left: -200px;; 
				background: red;
				display: inline;
		}
		div.wrap { float:left; width:100%;}
		div.content{ margin: 0 200px; background: #FF9; }
		div.sidebar{ 
			float:left; 
			width: 200px;
			margin-left:-100%; 
			background: red;
			display: inline;
		}

		div.foot { background: blue; height: 100px; clear: both;}

		p { padding: 10px;}



	</style>
		<!--[if lte IE 7]>
	<style type="text/css">
*html body { width:expression(document.documentElement.clientWidth < 600 ? "600px" : "auto");

	</style>
	<![endif]-->
</head>

<body>

	<div class="head">Header</div>

		<div class="wrap">
			<div class="content">
			<p><strong>2) Navigation here.</strong> long long fill filler very fill column column silly filler very filler fill fill filler text fill very silly fill text filler silly silly filler fill very make fill column text column very very column fill fill very silly column silly silly fill fill long filler </p>			<p><strong>2) Navigation here.</strong> long long fill filler very fill column column silly filler very filler fill fill filler text fill very silly fill text filler silly silly filler fill very make fill column text column very very column fill fill very silly column silly silly fill fill long filler </p>			<p><strong>2) Navigation here.</strong> long long fill filler very fill column column silly filler very filler fill fill filler text fill very silly fill text filler silly silly filler fill very make fill column text column very very column fill fill very silly column silly silly fill fill long filler </p>

			</div>
		</div>
		<div class="sidebar">
			<p><strong>2) Navigation here.</strong> long long fill filler very fill column column silly filler very filler fill fill filler text fill very silly fill text filler silly silly filler fill very make fill column text column very very column fill fill very silly column silly silly fill fill long filler </p>
		</div>
		<div class="right">
				<p><strong>3) More stuff here.</strong> very text make long silly make text very very text make long filler very make column make silly column fill silly column long make silly filler column filler silly long long column fill silly column very </p>

		</div>
		<div class="foot">Footer</div>


</body>
</html>

Sign In

Три колонки на дивах

Question

Link to comment

Share on other sites

10 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information