Выравнивание слоёв по нижней границе

[Strate]

Подскажите пожалуйста, как внутренний слой выровнять относительно родительского по нижним границам? vertical-align почему то не хочет работать.

#container {

width:100%;

min-width:400px;

height:93px;

background: URL(images/new/blue_fill.png) repeat-x;

vertical-align: baseline;

}

#element {

margin-left:auto;

margin-right:0;

margin-top:auto;

margin-bottom:0;

width: 400px;

height:20px;

}

Вот я хочу #element выровнять относительно #container по правому нижнему углу обоих блоков. И вышеприведённый код почему то не хочет работать. Как правильнее сделать?

UPD: HTML:

<div id="container">

<div id="element">1 | 2 | 3</div>

</div>

Edited April 26, 2009 by Strate

[s0rr0w]

Vertical-align: bottom выравнивает любой контент по низу только для ячеек таблицы. Во всех остальных случаях это работает только для строчных элементов.

[Strate]

Vertical-align: bottom выравнивает любой контент по низу только для ячеек таблицы. Во всех остальных случаях это работает только для строчных элементов.

Ясно, а с проблемой тогда как быть?) Какпрописать параметры чтобы добиться того, чего я хочу?)

[s0rr0w]

Ясно, а с проблемой тогда как быть?) Какпрописать параметры чтобы добиться того, чего я хочу?)

В моем ответе есть ответ на ваш вопрос. Внимательнее надо быть!

[Strate]

Извиняюсь за некоторое непонимание, я всё таки немного новичок в CSS.

Чтобы выравнить элемент по низу надо чтобы он был строчным (встроенным)? То есть по сути сделать div'y display:inline или использовать SPAN?

Или же в аргументах для vertical-align использовать text-bottom?

[s0rr0w]

Извиняюсь за некоторое непонимание, я всё таки немного новичок в CSS.

Чтобы выравнить элемент по низу надо чтобы он был строчным (встроенным)? То есть по сути сделать div'y display:inline или использовать SPAN?

Или же в аргументах для vertical-align использовать text-bottom?

Вас спасет только таблица. Другие варианты вам не помогут (говорим дружное спасибо криворуким программистам из Microsoft)

[onqu]

Таблицы - бяка))

#element {

width: 400px;

height:20px;

float: right; /*сдвигаем див к правому краю родителя, собственно это нужно если ширина родителя не фиксирована, как в данном случае*/

position: relative; /*задаем относительное от родителя позиционирование*/

top: 73px; /*при position: relative; сдвигаем вниз */

}

При желании добавляем text-align:right; для выравнивания текста по правому краю.