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

Установите родительское отделение на position: relative, тогда внутреннее отделение к...

position: absolute; 
bottom: 0;

... и там Вы идете:)

Поместите отделение в другое отделение и установите стиль родительского отделения на position:relative; Тогда на дочернем отделении, устанавливает следующие свойства CSS: position:absolute; bottom:0;

Если вас устраивает только самая нижняя строка текста, идущая сбоку от блока (а не полностью вокруг и под ним, чего нельзя обойтись без завершения блока и начала нового), возможно переместить блок в один из нижних углов родительского блока. Если вы помещаете какое-то содержимое в тег абзаца внутри блока и хотите разместить ссылку в правом нижнем углу блока, поместите ссылку в блок абзаца и установите для нее значение float: right, а затем вставьте тег div с clear : оба устанавливаются сразу под концом тега абзаца. Последний div должен убедиться, что родительский тег окружает плавающие теги.

<div class="article" style="display: block;">
    <h3>title</h3>
        <p>
            text content
            <a href="#" style="display: block;float: right;">Read More</a>
        </p>
    <div style="clear: both;"></div>
</div>

Довольно старый вопрос, но все же... Вы можете поместить div в нижнюю часть страницы вот так:

div{
  position: absolute; 
  height: 100px; 
  top: 100%; 
  margin-top:-100px; 
}

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

Если вам нужно относительное выравнивание, а DIV по-прежнему не дает вам того, что вам нужно, просто используйте таблицы и установите valign = "bottom" в ячейке, содержимое которой вы хотите выровнять по нижнему краю. Я знаю, что это не лучший ответ на ваш вопрос, поскольку DIV должны заменять таблицы, но это то, что мне пришлось сделать недавно с подписью к изображению, и до сих пор это работало безупречно.

Не уверен, но сценарий, опубликованный ранее, кажется, работает, если вы используете position: relative вместо absolute для дочернего div.

#parent {
  width: 780px;
  height: 250px;
  background: yellow;
  border: solid 2px red;
}
#child {
  position: relative;
  height: 50px;
  width: 780px;
  top: 100%;
  margin-top: -50px;
  background: blue;
  border: solid 2px green;
}

<div id="parent">
    This has some text in it.

    <div id="child">
        This is just some text to show at the bottom of the page
    </div>
</div>

И никаких таблиц...!

Я заставил это работать с первой попытки, добавив position:absolute; bottom:0; к идентификатору div внутри CSS. Я не добавлял родительский стиль position:relative;.

Он отлично работает как в Firefox, так и в IE 8, в IE 7 пока не пробовал.

Я также пробовал этот сценарий, опубликованный ранее:

div {
  position: absolute; 
  height: 100px; 
  top: 100%; 
  margin-top:-100px; 
}

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

div {
      position: relative;
      height:100px; /* Or the height of your image */
      top: 100%;
      margin-top: -100px;
}