Мне нужна помощь с позиционированием div. Структура HTML выглядит следующим образом:
<div class="container">
<div class="item">
<div class="left">
lorem lorem
</div>
<div class="right">
<p>right</p>
<p class="bottom">bottom</p>
</div>
</div>
</div>
И у меня есть следующий CSS:
.container {
float: left;
padding: 15px;
width: 600px;
}
.item {
float: left;
padding: 15px;
width: 570px;
}
.left {
float: left;
padding: 40px 20px;
margin-right: 10px;
}
.right {
position: relative;
float: left;
}
.bottom {
position: absolute;
bottom: 0;
}
Ширина и высота левого div являются динамическими.
Чего я хочу достичь:
- Сделайте высоту правого div равным высоте левого div.
- Сделайте ширину правого div, чтобы заполнить остальную часть div классом
item
. - Абзац с классом
bottom
должен находиться в нижней части правого div.
Вот простой образ, который представляет мою цель:
И ссылка на JSFiddle demo.