Faça div preencher o espaço restante do pai
Preciso de ajuda com o posicionamento de divs. A estrutura HTML é a seguinte:
<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>
E eu tenho o seguinte 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;
}
A largura e altura da div esquerda é dinâmica.
O que eu quero alcançar é:
Faça a altura da div direita igual à altura da div esquerda.Faça a largura do div direito preencher o resto do div com classeitem
.O parágrafo com classebottom
deve estar na parte inferior da div direita.Aqui está uma imagem simples que representa meu objetivo:
E um link para umDemonstração JSFiddle.