Текст CSS выравнивает нижнюю часть контейнера

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

У меня есть что-то вроде этого:

<div id='header'>

     <img id='logo' />

     <p id='quote'></p>

</div>

И CSS:

div#header {
    height: 200px;
}

div#header img#logo {
    float: left;
}

p#quote {
    float: left;
}

Ответ 1

http://jsfiddle.net/danheberden/ymwPe/

<div id="container">
    <div id="gonnaBeOnTheBottom">
        <p>Hi there!</p>
        <p>I'm on the bottom!</p>
    </div>
</div>

CSS

#container {
    background: #EEE;
    height:400px;
    width:400px;
    position:relative;
}
#gonnaBeOnTheBottom {
    position:absolute;
    bottom:0;
}

установив position:relative в родительском контейнере, вы можете использовать внутри него абсолютные элементы позиции:)

Ответ 2

Я внес некоторые изменения в ваш код. Попробуйте это

<!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=iso-8859-1" />
<style>


div#header {
height:200px;
}

div#header img#logo {
float:left;
}

.header p {
float:left
}

</style>
</head>
<body>

<div id='header'>

     <img id='logo' src="../Pictures/myfarm.PNG" width="220" height="130" />

 <p > ygkgi65iruyrftyhgffhfjgfhgjkhjfjhfjhfyj </p>
  <p > ygkgi65iruyrftyhgffhfjgfhgjkhjfjhfjhfyj </p>
   <p > ygkgi65iruyrftyhgffhfjgfhgjkhjfjhfjhfyj </p>
    <p > ygkgi65iruyrftyhgffhfjgfhgjkhjfjhfjhfyj </p>
     <p > ygkgi65iruyrftyhgffhfjgfhgjkhjfjhfjhfyj </p>

</div>
</body>
</html>

Ответ 3

Недавно я столкнулся с трюком с вертикальным центром, который я смог настроить на сервер для этой цели: http://codepen.io/Bushwazi/pen/VYBBmL

parent {
  height: 200px;
}
child {
  position: relative;
  top: 100%;
  transform: translateY(-100%);
  display block
}

** Необходимо указать, что браузеру необходимо поддерживать CSS3 transform: http://caniuse.com/#search=transforms