Вертикальное выранивание по низу средствами CSS

GROB · 12 Июл 2007

Столкнулся с ситуацией.
Есть 3х колоночный дизайн на div. Первая и вторая колонка - формируются новостями - постоянно разный размер. Третья колонка маленькая - сверху блок авторизации. Нужно сделать что бы всегда внизу этой колонки был блок div который был бы "прилеплен" к низу этой колонки и находился на одном уровнем с самой длинной колонкой соответственно. Т.е. вот так:

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=windows-1251" />
<title>Документ Без Имени</title>
<style type="text/css">
<!--
.left { margin: 0 5px 0 5px; border: 1px solid #000000; float: left;}
.center{ margin: 0 5px 0 5px; border: 1px solid #000000; float: left;}
.right{margin: 0 5px 0 5px; border: 1px solid #000000; float: left;}
-->
</style>
</head>

<body>
  <div class="left">тест<br />текст<br />тест<br />текст<br />тест<br />текст<br />тест<br />текст<br />тест<br />текст<br />тест<br />текст<br />тест<br />текст<br />тест<br />текст<br />тест<br />текст<br />тест<br />текст<br />
  </div>
  <div class="center">тест<br />текст<br />тест<br />текст<br />тест<br />текст<br />тест<br />текст<br />тест<br />текст<br />тест<br />текст<br />тест<br />текст
  </div>
  <div class="right"><div style="border: 1px solid #000000;">блок<br />авторизации</div><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><div style="border: 1px solid #000000;">Здесь нужен блок</div>
  </div>
</body>

</html>

Кто знает как, лучше сразу в коде.

the_stalker · 19 Июл 2007

К сожалению все оказалось не так просто как я думал. Если использовать плавающую модель, то сделать это будет очень сложно разве что только с помощью экспрешена после 2 часов я так и не смог настроить корректного отображения блоков. Иногда приходится мирится с тем что таблицы в некоторых случаях превосходят блочную верстку. Поэтому предлагаю использовать их.

bueno · 20 Июл 2007

К сожалению все оказалось не так просто как я думал. Если использовать плавающую модель, то сделать это будет очень сложно разве что только с помощью экспрешена после 2 часов я так и не смог настроить корректного отображения блоков. Иногда приходится мирится с тем что таблицы в некоторых случаях превосходят блочную верстку. Поэтому предлагаю использовать их.

не стоит возводить собственное незнание в абсолют..

GROB
держи.. суть передал, дальше сам..

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=windows-1251" />
<title>Документ Без Имени</title>
<style type="text/css">
<!--
#main{ overflow:hidden; position: relative; float:left; border:1px red dashed;}
.left { float: left; padding: 0 5px 0 5px; border: 1px solid #000000; }
.center{ float: left; padding: 0 5px 0 5px; border: 1px solid #000000; }

#right{  position:relative; float:left; border: 1px solid #000000;}
#bottomed{ position:absolute; right:0px; bottom:0px; border: 1px solid #000000;}
-->
</style>
</head>
<body>
<div id="main">

  <div class="left">тест<br />текст<br />тест<br />текст<br />тест<br />текст<br />тест<br />текст<br />тест<br />текст<br />тест<br />текст<br />тест<br />текст<br />тест
  </div>
  
  <div class="center">тест<br />текст<br />тест<br />текст<br />тест<br />текст<br />тест<br />текст<br />тест<br />текст<br />тест<br />текст<br />тест<br />текст
  </div>
  	
  <div id="right">
  	<div style=" padding: 0 5px 0 5px; border: 1px solid #000000;">блок<br />авторизации</div>
  </div>
  	<div id="bottomed">Здесь нужен блок</div>
  
</div>
</body>
</html>

Вертикальное выранивание по низу средствами CSS

GROB

Гуру форума

the_stalker

Постоялец

bueno

Читатель