выровнить DIV по нижнему краю

termoplus · August 14, 2009

всем привет. опять я!

ребят подскажите плиз как выровнить Див по нижнему краю. Например есть две колонки, левая например 600 пик в высоту, правая 450 и 150, так вот во всех браузерах див (150) по разному отображается, точнее доли мм. хочу воровнить его по нижнему краю левой колонки. можно?

спасибо

Searcher · August 14, 2009

можно, но способ зависит от многово. покажите ваш код.

psywalker · August 14, 2009

Левой колонке Релатив, а тому кого выравнивать - Абсолют и позиционировать его вниз

<div class="absolute">Bottom</div>

</div>

div.relative { position: relative; width: 150px; height: 600px;}

div.absolute { position: absolute; bottom: 0; left: 0; width: 150px; heigth: 400px;}

termoplus · August 14, 2009

спасибо ребят, вот только можно как-то бед абсалютов? так как левая колонка может изменяться....

спасибо

psywalker · August 14, 2009

спасибо ребят, вот только можно как-то бед абсалютов? так как левая колонка может изменяться....

ничего страшного, абсолют будет всегда внизу

termoplus · August 14, 2009

неа, не думаю что так получится.

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

psywalker · August 14, 2009

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

погоди, ну а какая разница, ну пусть будет например левая колонка с релативом 300 пикселов в высоту, а абсолют всегда 150 пикселов в высоту. Допустим высота левой измениться на 600пк - абсолют будет внизу, вдруг опять изменится левая и уже будет 100пк - а абсолют всё равно внизу. Я к тому, что какая разница - будет ли показываться хоть что нибудь, если высота колонки будет 0пк? Лучше уж хоть какая та часть абсолюта будет видна, чем вообще ничего? Понимаешь мою мысль?

Вот изменяй высоту у Релативной колонки и смотри результат:

<!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" />
<style type="text/css">
	*{ margin: 0; padding: 0;}
	div.r { width: 500px; height: 300px; position: relative; border: 1px solid #000;}
	div.a { width: 500px; height: 100px; background: red; position: absolute; bottom: 0; left: 0;}
</style>
<title></title>
</head>

<body>
<div class="r">
	<div class="a">BOTTOM!</div>
</div>
</body>
</html>

Edited August 14, 2009 by psywalker

termoplus · August 14, 2009

вот так должно получится. левая колонка может увеличиваться на кажкой странице.

psywalker · August 14, 2009

вот так должно получится. левая колонка может увеличиваться на кажкой странице.

Погоди, а нарисуй мне то, что ты хочешь получить в итоге ? и Отметь на рисунке Див с Релативом и Див внутри него с Абсолютом

termoplus · August 14, 2009

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

psywalker · August 14, 2009

Смотри значит, если я правильно понял, то задача заключается в следующем:

1) Мы имеем Две колонки, Левая и Правая

2) Левая может тянуться всегда по разному и быть Любой длины, но правая при этом должна Быть такой же длины, как и Левая? Как бы всегда подстраиваться под Левую?

3) В правой колонке <div>-Релатив лежит <div> - Абсолют фиксированной ширины и высоты (допустим 150х150пк) который всегда прижат к низу?

4) И соответственно Если левая колонка (не важно какой Высоты), то Правая вместе со своим Абсолютом должна опускаться вниз и быть такой же высоты, как и Левая?

Edited August 14, 2009 by psywalker

termoplus · August 14, 2009

сорри, видимо я не так объясняю.

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

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

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

psywalker · August 14, 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
	*{ margin: 0; padding: 0;}

		div.wrap { 
			position: relative; 
			width: 1000px; 
			border: 1px solid #000;
			margin: 0 auto;

		}

			div.left { 
				width: 700px;
				position: relative;
				top: 0;
				left: 0;
				bottom:0;
				background: red;
			}

			div.right { 
				width: 250px;
				position: absolute;
				right: 0;
				top: 0;
				bottom: 0;
				background: yellow;
			}
				div.left div.left-block,
				div.right div.right-block {
					position: absolute;
					bottom: 0;
					right: 0;
					width: 160px;
					height: 160px;
					background: blue;
				}

					div.right div.right-block { left: 0;}


</style>
<title></title>
</head>

<body>
<div class="wrap">
	<div class="left">
		<div class="left-block">Этот блок всегда будет внизу левой колонки</div>
   	сорри, видимо я не так объясняю.
   	сорри, видимо я не так объясняю.
давай решим для чего я хочу выронить правый нижний див по нижней стороне левой колонки.
дело в том, что никак не получается поймать полное выравнивание. каждый браузер показывает по размому. один браузер на 3 пик не достает до дна, другой наоборот 3 пик вылетает за рамки. третий показывает все хорошо. поэтому я подумал что если бы его выделать по нижнему краю, все исправиться. хотя только понял, что на других страницах все будет по другому.
простыми словами мне нужно как-то сделать так чтообы левая и правая колонка были на одно уровне (нижний край), это видно на картинке выше. на внутренних страницах без разницы, пусть одна колонка будет длинней другой - не важно!   	сорри, видимо я не так объясняю.
давай решим для чего я хочу выронить правый нижний див по нижней стороне левой колонки.
дело в том, что никак не получается поймать полное выравнивание. каждый браузер показывает по размому. один браузер на 3 пик не достает до дна, другой наоборот 3 пик вылетает за рамки. третий показывает все хорошо. поэтому я подумал что если бы его выделать по нижнему краю, все исправиться. хотя только понял, что на других страницах все будет по другому.
простыми словами мне нужно как-то сделать так чтообы левая и правая колонка были на одно уровне (нижний край), это видно на картинке выше. на внутренних страницах без разницы, пусть одна колонка будет длинней другой - не важно!
	</div>
	<div class="right">
		<div class="right-block">Этот блок всегда будет внизу правой колонки</div>
	</div>
</div>
</body>
</html>

SelenIT · August 14, 2009

а чтобы задать релатив нужны фиксированные размеры...

Где такое написано?

termoplus · August 15, 2009

psywalker

все это прекрасно, спасибо большое, вот только все это не то что мне нужно!

1) не люблю абсолюты ваще! не знаю почему, но стараюсь не использовать.

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

SelenIT

Где такое написано?

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

всем спасибо за все! закрываю топик

Edited August 15, 2009 by termoplus

Sign In

выровнить DIV по нижнему краю

Question

Link to comment

Share on other sites

14 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

Join the conversation

Обсуждения

Important Information