Выровняйте div по нижней части элемента div, не зная высоты элемента div

Я хочу выровнять div к основанию div, не зная высоты этого div-элемента. Вот макет, с которым я работаю: http://abbymilberg.com/sample-layout.html.

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

Я не знаю, как сделать это с помощью CSS. Я предполагаю, что может быть какой-то способ получить высоту элемента с помощью javascript, но я открыт для всего, что работает.

<head>

    <style type="text/css">

        #body{text-align:center; margin:0px;}

        #wrapper{border:solid 1px; margin:10px auto 10px; width:800px; 
        padding:10px; text-align:left; }

        #left{margin-right:160px; border:solid 1px;}

        #right{float:right; border:solid 1px; width:150px;}

    </style>

</head>

<body>

    <div id="wrapper">

        <div id="right">
            <h2>Right</h2>
        </div>

        <div id="left">
            <h2>Left</h2>
        </div>

    </div>

</body>

</html>
Источник

1 ответ

Решение

Используйте абсолютное и относительное позиционирование:

#wrapper {
  position: relative;
}

#right {
  position: absolute;
  bottom: 0;
  right: 0;
}

демонстрация

Источник
Другие вопросы по тегам