1. Задавайте здесь вопросы о коде, которые не подходят в другие разделы, такие как:
    Дизайн > Верстка
    PHP > Как сделать на PHP
    Скрыть объявление

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

Тема в разделе "Web Coding", создана пользователем GROB, 12 июл 2007.

Статус темы:
Закрыта.
Модераторы: latteo
  1. GROB

    GROB

    Регистр.:
    28 мар 2006
    Сообщения:
    177
    Симпатии:
    63
    Столкнулся с ситуацией.
    Есть 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>
    Кто знает как, лучше сразу в коде.
     
  2. the_stalker

    the_stalker Постоялец

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

    bueno Читатель

    Заблокирован
    Регистр.:
    7 май 2007
    Сообщения:
    236
    Симпатии:
    69
    не стоит возводить собственное незнание в абсолют..

    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>
     
Статус темы:
Закрыта.