Как прижать текст в DIV к нижней части родительского DIVa?

Статус
В этой теме нельзя размещать новые ответы.
dandandan

dandandan

Мой дом здесь!
Регистрация
7 Авг 2008
Сообщения
1.036
Реакции
292
Возник вопрос как прижать текст в DIV к нижней части родительского DIVa?

Вот кусочек текста:
<div class="header">
<div class="50_persent_white_left">{verh}</div>
<div class="50_persent_white_right">Добавить в избранное</div>

<div class="100_persent_white">Ссылка</div>
</div>
Нажмите для раскрытия...
В данном коде Div с текстом Ссылка нужно прижать к нижней части <div class="header">
Сейчас кусок Css имеет вот такой вот вид:
.header{
width:100%;
background:url(images/header.jpg) repeat-x;
height:234px;
float:left;
color:#FFFFFF;
}
.50_persent_white_left{
width:50%;
float:left;
vertical-align:top;
text-align:left;
}
.50_persent_white_right{
width:50%;
float:right;
vertical-align:top;
text-align:right;
}
.100_persent_white{
width:100%;
vertical-align:text-bottom;
text-align:center;
float:left;
}
Нажмите для раскрытия...
И еще вопросик. Почему-то у меня в .100_persent_white Текст не центрируется по центру. что не так? :)
 
вот примерно так

HTML: 
<html>
<head>
<style type="text/css">
.header{
width:100%;
background:url(images/header.jpg) repeat-x;
height:234px;
float:left;
} 
.persent_white_left{
width:50%;
float:left; 
text-align:left;
}
.persent_white_right{
width:50%;
float:right;
text-align:right;
} 
.persent_white{
width:100%;
margin-top: 195px;
text-align:center;
float:left;
}

</style>
</head>
<body>
<div class="header">
<div class="persent_white_left">{verh}</div>
<div class="persent_white_right">Добавить в избранное</div>

<div class="persent_white">Ссылка</div>
</div>
</body>
</html>

и текст ссылка центрируется гуд ;)
 
для хедера

position: relative;


и для нижнего дива


position: absolute;
bottom: 0;
 
alexzander69 написал(а):
для хедера

position: relative;


или для нижнего дива


position: absolute;
bottom: 0;
Нажмите для раскрытия...
Ни первый, ни второй, ни оба сразу не подошли.

Пример k16avto тоже не дал нужного эффекта.
Получается, что
Первые 2 дива по 50% шириной располагаются в одну строку (так и нужно),
Нижний див, который нужно к низу прижать книзу родительского div'a находится слева под дивом шириной в 50%.
 
ни оба сразу не подошли.
Нажмите для раскрытия...
и не подойдут. каждый способ решает свою задачу. иначе каша получается.

ниче не понимаю. именно этот кусок кода у меня в FF, Opera, IE6, сафири и хром отображаются гуд.
что выводит {verh}? весь код с {verh} в студию. телепаты в отпуске. и вообще хоть бы скрин или схему того что в итоге должно получиться.
 
ТС покажи на изображении чего нужно!
 
dandandan написал(а):
Ни первый, ни второй, ни оба сразу не подошли.

Пример k16avto тоже не дал нужного эффекта.
Получается, что
Первые 2 дива по 50% шириной располагаются в одну строку (так и нужно),
Нижний див, который нужно к низу прижать книзу родительского div'a находится слева под дивом шириной в 50%.
Нажмите для раскрытия...


Все работает, ну за исключением может быть ie5.5
Проверь имена селекторов

HTML: 
  <style type="text/css">

  .header{
      width:100%;
      background:url(images/header.jpg) repeat-x;
      height:234px;
      float:left;
      color:#FFFFFF;
     
     
      position: relative;
  }
  .half_persent_white_left{
      width:50%;
      float:left;
      vertical-align:top;
      text-align:left;
  }
  .half_persent_white_right{
      width:50%;
      float:right;
      vertical-align:top;
      text-align:right;
  } 
  .full_persent_white{
      width:100%;
      vertical-align:bottom;
      text-align:center;
      float:left;
      
      
      position: absolute;
      bottom: 0;
  } 


  </style>


</head>

<body>
  <div class="header">
    <div class="half_persent_white_left">
      {verh}
    </div>

    <div class="half_persent_white_right">
      Добавить в избранное
    </div>

    <div class="full_persent_white">
      Ссылка
    </div>
  </div>

Добавлено через 3 минуты
Я имел ввиду, что селекторы CSS могут содержать буквы A-Z, числа 0-9, и дефис, но начинаться должны только с буквы,
потому твой код не читается браузером
 
Понял в чем моя ошибка (селекторы начинаются с цифр). Вечером попробую.
 
dandandan написал(а):
Понял в чем моя ошибка (селекторы начинаются с цифр). Вечером попробую.
Нажмите для раскрытия...

О_о я даж и не подумал что ты так и используеш классы. учту на будующее что некоторые еще и допускают такие критичные ошибки. я то убирал цифры в классах...
 
Можно сказать, что это мой первый опыт в верстке дивами.
 
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху