Колонки одинаковой высоты.

Игорь Ермаков · November 8, 2009

Хочу вас озадачить, друзья.

Дано: 2 колонки с текстом (фиксированные или нет не важно)

У каждой есть фон ну и прочие примочки.

Нужно: создать эффект того, что эти колонки всегда одинаковы по высоте не зависимо от того сколько контента в каждой.

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

Как-то давно попадалась эта задачка, сам её решил, но в упор не помню как.

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

Вот до чего дотопал:

<!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>Example</title>
<style>
*{margin:0;padding:0}

.contaner{background:url(img/main-bg.png) repeat-y;
width:500px;position:relative;
margin:0 auto}

.left{width:250px;
position:absolute;left:0px}

.right{width:250px;
margin-left:250px}
</style>
</head>
<body>

<div class="contaner">

<div class="left">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.
</div>

<div class="right">
Lorem ipsum Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.
</div>

</div>

</body>
</html>

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

Edited November 8, 2009 by Игорь Ермаков

Игорь Ермаков · November 9, 2009

мохно здесь почитать
там другие варианты

Первые 3 варианта однозначно фигня.

Способ 1. Использование свойства display: table

Ну до этого я бы и сам додумался, но это даже IE7 не понимает.

Способ 2: Использование JavaScript

Хааа с лопатой то и дурак яму выкопает.

Способ 3: искусственные колонки

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

Вот четвёртый стоит внимания.

psywalker · November 9, 2009

А мне все 4 не нравятся, первые Три ты сказал почему, а четвёртый из-за объёма кода

mishka · November 9, 2009

способ с дисплей тейбл нормальный способ, а для ие6-7 експрешн написать можна

Игорь Ермаков · November 9, 2009

Нижние паддинги делают отступ снизу, а отрицательный марджин наоборот втягивает низ обратно, в итоге ты имеешь огромный нижний отступ, который обрезаешь Оверфлухой
Для ИЕ попробуй Зуум:1

Класс, теперь доходит. зум 1 пробовал, ничего.

Лучше заново их переверстаю, теперь понял в чём тут суть, кажется.

psywalker · November 9, 2009

способ с дисплей тейбл нормальный способ, а для ие6-7 експрешн написать можна

Кросс-код в студию

Класс, теперь доходит. зум 1 пробовал, ничего.
Лучше заново их переверстаю, теперь понял в чём тут суть, кажется.

Зум для обёрточного

mishka · November 9, 2009

способ который там представлен с джс, он не совсем коректный. Там джс выполнится только при загрузке страницы. Тоесть один раз, значит для резины негодится. Потому что если окно браузера уменьшить то колонки станут ужЕ, значит должны стать выше, но тот джс высоту не пересчитает, так как выполняется один раз только при загрузке страницы. Там надо добавить вызов функции еще и при ресайзе окна.

Edited November 9, 2009 by mishka2

Игорь Ермаков · November 9, 2009

способ с дисплей тейбл нормальный способ, а для ие6-7 експрешн написать можна

Кодеры-джедаи ненавидят JS когда можно решить задачу на чистом CSS

mishka · November 9, 2009

Класс, теперь доходит. зум 1 пробовал, ничего.
Лучше заново их переверстаю, теперь понял в чём тут суть, кажется.

убери с right релейтив, а контейнеру пропиши либо 100% ширины либо 1% высоты, либо зуум

Игорь Ермаков · November 9, 2009

Зум для обёрточного

Да я для всяких попробовал, всё равно переверстать надо мне самому не нравится как я их расположил.

mishka · November 9, 2009

Да я для всяких попробовал, всё равно переверстать надо мне самому не нравится как я их расположил.

Я только что в ие6 сделал - все ок

psywalker · November 9, 2009

Так, в общем JS не катит, делаем на CSS ребят

rash · November 9, 2009

Способ 3: искусственные колонки
До этого я тоже сам дошёл, первый способ которым я решил задачу, но в таком случае колонки только фиксированные.
Вот четвёртый стоит внимания.

Третий способ (точнее, способ, похожий на третий) позволяет делать и резину, но все равно это накладывает ограничения на тип фона и возможности по его оформлению.

Четвертый - самый интересный.

psywalker · November 9, 2009

Третий способ (точнее, способ, похожий на третий) позволяет делать и резину, но все равно это накладывает ограничения на тип фона и возможности по его оформлению.
Четвертый - самый интересный.

Четвёртый меня не радует из за лишних трёх колонок, это для меня ужас, нужно красивее способ

mishka · November 9, 2009

короче я завис.... все те 4 способа знаю... повторятся нехотелось.

Поэтому я смог решить только с джс...

И спасибо Great Rash, - при написании джс консультировался у него как выловить класс регулярным выражением.

<!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>
	<title>sameHeight</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style type="text/css">
	<!--
	body{
		margin:0;
		font:16px/18px Verdana,Tahoma,sans-serif;
	}
	.holder{
		width:100%;
		overflow:hidden;
		margin:10px 0 0;
	}
	.sidebar{
		float:left;
		width:200px;
		padding:0 10px;
		background:#ccc;
		_margin:0 -3px 0 0;
	}
	.content{
		overflow:hidden;
		padding:0 10px;
		background:#eee;
		_zoom:1;
	}
	p{
		margin:10px 0;
	}
	-->
	</style>
	<script type="text/javascript">
	<!--
	function initScript(){
		startSameHeight();
		window.onresize=function(){startSameHeight()};
	}
	function startSameHeight(){
		sameHeight({
			tagName:'div',
			tagClass:'block'
		});
		sameHeight({
			tagName:'div',
			tagClass:'block2'
		});
	}

	function sameHeight(_options){
		var _tagName=_options.tagName;
		var _tagClass=_options.tagClass;
		var maxHeight=0;
		var _elements=document.getElementsByTagName(_tagName)
		var re=eval('/'+_tagClass+'\\'+'b/');

		if(_elements){
			for(var i=0;i<_elements.length;i++){
				if(re.test(_elements[i].className)){
					_elements[i].style.height='auto';
					if(_elements[i].offsetHeight>=maxHeight){
						maxHeight=_elements[i].offsetHeight;
					}
				}
			}
			for(var i=0;i<_elements.length;i++){
				if(re.test(_elements[i].className)){
					_elements[i].style.height=maxHeight+'px';
				}
			}
		}
	}

	if(window.addEventListener){
		window.addEventListener("load",initScript,false);
	}else if(window.attachEvent){
		window.attachEvent("onload",initScript);
	}
	//-->
	</script>
</head>
<body>
	<div class="holder">
		<div class="sidebar block">
			<p>sidebar</p>
		</div>
		<div class="content block">
			<p>Lorem ipsum dolor sit amet consectetuer nulla vel tincidunt urna semper. Vestibulum turpis tincidunt gravida eros vel Phasellus nunc sodales tempor dictumst. Nec nec id.</p>
			<p>Ridiculus est Maecenas Phasellus est In sed augue Suspendisse ante ac. Nulla volutpat Vestibulum Vestibulum odio id ullamcorper non dignissim tellus justo. Ut sed.</p>
		</div>
	</div>
	<div class="holder">
		<div class="sidebar block2">
			<p>sidebar</p>
		</div>
		<div class="content block2">
			<p>Lorem ipsum dolor sit amet consectetuer Curabitur at sagittis felis lacinia. </p>
			<p>Nibh tellus semper In semper sapien rutrum mus est dolor aliquet. Tellus vitae nibh faucibus augue Curabitur vestibulum amet elit.</p>
			<p>Sed non tellus Nunc Morbi tempus Curabitur tempus dui nibh a. Pellentesque Nullam semper vitae volutpat ut adipiscing lobortis.</p>
			<p>Ridiculus est Maecenas Phasellus est In sed augue Suspendisse ante ac. Nulla volutpat Vestibulum Vestibulum odio id ullamcorper non dignissim tellus justo. Ut sed.</p>
		</div>
	</div>
</body>
</html>

Если делать без джс, то лучше чем способ предложенный Максом ( http://psywalker.ru/Forum/Column_height/main2.html ) немогу придумать...

Edited November 9, 2009 by mishka2

mishka · November 9, 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">
<head>
	<title>two columns</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style type="text/css">
	body{
		margin:0;
	}
	#wrapper{
		position:relative;
		overflow:hidden;
		height:1%;
	}
	#sidebar{
		width:25%;
		float:left;
		position:relative;
		z-index:1;
	}
	.back-sidebar{
		background:#ff0076;
		width:25%;
		height:9999em;
		position:absolute;
		top:0;
		left:0;
	}
	#content{
		overflow:hidden;
		height:1%;
		position:relative;
		z-index:1;
	}
	.back-content{
		background:#ffb700;
		position:absolute;
		top:0;
		left:25%;
		width:75%;
		height:9999em;
	}
	</style>
</head>
<body>
<div id="wrapper">
	<div id="sidebar">
		<p>Lorem ipsum dolor sit amet consectetuer nunc vel id metus dolor. Suspendisse sem malesuada lacus vel Duis tincidunt pede Curabitur vel aliquet. Vestibulum pellentesque sagittis urna.</p>
	</div>
	<div class="back-sidebar"></div>
	<div id="content">
		<p>Lorem ipsum dolor sit amet consectetuer urna magnis aliquam at porttitor. Tincidunt velit et eget velit et dolor ante convallis sem malesuada. Nonummy nascetur orci velit congue metus.</p>
		<p>Auctor tortor Nulla enim netus Sed lacus adipiscing Quisque lacus gravida. Phasellus mus Vivamus ipsum.</p>
		<p>Semper Curabitur massa est Vestibulum morbi Curabitur pellentesque et Curabitur nibh. Aliquam augue eget sit ligula laoreet.</p>
		<p>Accumsan risus ipsum elit venenatis hac Quisque Nam Nam Fusce.</p>
		<p>Penatibus Pellentesque Nullam pretium congue Curabitur et felis felis felis Vestibulum. A eros cursus tempus mauris Sed.</p>
		<p>Nunc vel augue sit volutpat in Nullam dui risus est at. </p>
		<p>Vestibulum ut convallis non quis sem a congue auctor sem ipsum. Tincidunt eu laoreet Morbi Praesent laoreet fringilla Donec tortor nunc vel. </p>
		<p>Pretium nibh ut nunc nec adipiscing quis augue vitae feugiat eros. Aliquam wisi id Nullam adipiscing id ipsum metus ut pretium Vivamus. Neque pellentesque at.</p>
		<p>Pellentesque eros consequat vitae dignissim consectetuer volutpat libero laoreet Maecenas nulla. Phasellus tincidunt.</p>
	</div>
	<div class="back-content"></div>
</div>
</body>
</html>

psywalker · November 9, 2009

Нее Миих, так дело не пойдёт, слишком уж объёмно, и темболее были представлены способы без JS, да и с меньшим кодом, поэтому этот точно не вписывается, согласись. Мне в принципе мой тоже нравится http://psywalker.ru/Forum/Column_height/main2.html наверное всё же больше остальных, особенно если убрать углы, то можно код сделать покрасивши, но всё же лишние три Дива меня смущают, но другого выхода пока тоже не вижу...нужно думать в общем

p.s. - чувствую придётся идти за шаманом (Great Rash)

Кстати вот этот с одной стороны ничего, а с другой мне кажется может создать проблемы при плохой игре, а ты как думаешь Медведь? http://www.psywalker.ru/Forum/Column_height/main4.html

А вот твой старенький, правда с JS и ещё с задержкой, что меня не радует

http://www.psywalker.ru/Forum/Column_height/main3.html

Edited November 9, 2009 by psywalker

rash · November 9, 2009

Четвёртый меня не радует из за лишних трёх колонок, это для меня ужас, нужно красивее способ

Ну это совсем небольшая жертва за реальную кроссбраузерность, а без лишних элементов можно будет строить подобные макеты когда исчезнет IE 7 :-)

mishka · November 9, 2009

http://www.psywalker.ru/Forum/Column_height/main4.html - все хорошо, минус только в том что невозможно делать блоки с круглыми углами. Да и всеже осторожным надо быть с таким подходом. Как по мне так 4й ( http://www.getincss.ru/2009/07/11/4-sposob...nakovoj-vysoty/ ) способ надежнее.

http://psywalker.ru/Forum/Column_height/main2.html - наверное самый оптимальный

Edited November 9, 2009 by mishka2

psywalker · November 9, 2009

http://www.psywalker.ru/Forum/Column_height/main4.html - все хорошо, минус только в том что невозможно делать блоки с круглыми углами. Да и всеже осторожным надо быть с таким подходом.

- Согласен

Как по мне так 4й ( http://www.getincss.ru/2009/07/11/4-sposob...nakovoj-vysoty/ ) способ надежнее.

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

Но я надеюсь мы не ставим точку? :)

Игорь Ермаков · November 9, 2009

Вот вариант который работает в IE6

<!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>Две колонки одинаковой высоты v3.</title>
<style type="text/css">
*{margin:0;padding:0}
.contaner{background:#ccc;
overflow:hidden;
zoom:1}
.left{width:30%;
padding:15px;
float:left;
zoom:1}
.right{background:#000;
padding:15px;
color:#fff;
overflow:hidden;
zoom:1;
margin-bottom: -30000px;
padding-bottom: 30030px;
// float:right}
</style>
</head>
<body>
<div class="contaner">
<div class="left">
Lorem ipsum dolor sit amet, consectolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.
orem ipsum dolor sit amet, consectolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.
</div>
<div class="right">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.
Ut wisi enimLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.
adis nostrud exerci taion ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat. Duis te feugifacilisi per suscipit lobortis nisl ut aliquip ex en commodo consequat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi. Ut wisi enim ad minim veniam, quis nostrud exerci taion ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat. Duis te feugifacilisi per suscipit lobortis nisl ut aliquip ex en commodo consequat.
</div>
</div>
</body>
</html>

Edited November 9, 2009 by Игорь Ермаков

Игорь Ермаков · November 9, 2009

Благодаря вот этому методу, который любезно предоставил psywalker:

margin-bottom: -30000px;
padding-bottom: 30030px;

Я сумел собрать трёхколоночный макет с колонками одинаковой высоты:

<!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>
<link href="style.css" type="text/css" rel="stylesheet" media="all" />
</head>
<body>
<div class="contaner">
<div class="left">
Lorem ipsum dolor sit amet, coctolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.
Lorem ipsum dolor sit amet, coctolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.
Lorem ipsum dolor sit amet, coctolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.
</div>
<div class="right">
Lorem ipsum dolor sit amet, coctolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.
Lorem ipsum dolor sit amet, coctolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.
</div>
<div class="content">
Lorem ipsum dolor sit amet, coctolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.
</div>
</div>
</body>
</html>

CSS

*{margin:0;padding:0}

div{padding:15px}

.contaner{background:#666;
padding:0;
overflow:hidden;
zoom:1;}

.left{background:#ccc;
float:left;
width:33%;
margin-bottom: -30000px;
padding-bottom: 30030px;}

.right{background:green;
color:#fff;
float:right;
width:33%;
margin-bottom: -30000px;
padding-bottom: 30030px;}

.content{background:#000;
color:#fff;
overflow:hidden;
zoom:1;
margin-bottom: -30000px;
padding-bottom: 30030px; //float:left;}

http://portfolio.kg-am.com/Example/two-height3/

http://portfolio.kg-am.com/Example/three_height/

psywalker · November 10, 2009

Вот молодец Игорёк, только ты зря контент наверн делал Оверфлухой, нужно было для всех так и сделать Флоат, чтобы мозг не парить, а так всё вроде гуд

Ну уже теперь можешь смело открыть ссылочку и посмотреть: http://www.psywalker.ru/Forum/Column_height/main4.html

Задание номер 2

Есть ещё один способ, как минимум, на Абсолюте и Релативе, ну и флоат там заодно. Удачи

Игорь Ермаков · November 10, 2009

Вот молодец Игорёк, только ты зря контент наверн делал Оверфлухой, нужно было для всех так и сделать Флоат, чтобы мозг не парить, а так всё вроде гуд
Ну уже теперь можешь смело открыть ссылочку и посмотреть: http://www.psywalker.ru/Forum/Column_height/main4.html

Эх.. надо было ещё немного мозгами раскинуть, тут же пкуренному ежу понятно было, что 4-мя блоками можно сделать, а я 5-ю сделал.

Задание номер 2
Есть ещё один способ, как минимум, на Абсолюте и Релативе, ну и флоат там заодно. Удачи

Вот сейчас над этим думаю, только пока слабо думается.

http://portfolio.kg-am.com/Example/two_height4/

P.S как выяснилось спецификация CSS на русском весьма бесполезная вещь.

psywalker · November 10, 2009

Давай Игорёк, думай ещё, пока тухляк

Игорь Ермаков · November 10, 2009

http://portfolio.kg-am.com/Example/two_height4/

Ну вот очередной поток бреда.

Как ни странно кое как да работает.

Sign In

Колонки одинаковой высоты.

Question

Link to comment

Share on other sites

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

55 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

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

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