CSS altura pai-filho

Question

Eu tenho algum problema com esses trechos de código:

CSS:

#wrapper{
    width: 600px;
    background: gray;
}

#left{
    float: left;
    width: 150px;
    height: 80px;
    background: red;
}

#right{
    float: left;
    width: 450px;
    height: 150px;
    background: yellow;
}

HTML:

<div id="wrapper">
    <div id="left"></div>
    <div id="right"></div>
</div>

altura de Esquerda é 80px, e altura de direito é 150px. Gostaria que esta coisa para aparecer como este: http://img408.imageshack.us/img408/9978/dream.th. jpg A imagem acima do IE, quando eu uso o IE esses trechos funcionar perfeitamente. Mas quando eu usar outro navegador (ópera, FF, Safari, Chrome), fico com esta: http://img408.imageshack.us/img408/869/fact.th. jpg

Este não é legal ... Eu quero que o pai (#wrapper) a altura do elemento para obter o maior altura dos dois filhos.

Answer 1

Este é um bug no IE.

Contendo carros alegóricos explica por que você ver esse comportamento, enquanto que Métodos para conter flutua dá melhores soluções de adicionar marcação extra

Answer 2

CSS

#wrapper:after {
 visibility: hidden;
 display: block;
 font-size: 0;
 content: " ";
 clear: both;
 height: 0;}

Answer 3

Obrigado pela resposta rápida David. Eu não li todo o conteúdo que você escreveu (dois links), mas me deparei com uma solução no segundo link. Eu coloquei uma div extra, com "clear: both;" ao recipiente, e está funcionando! Obrigado. Matt bola: obrigado, mas eu gostaria que esta coisa para crescer dinamicamente

Answer 4

Quando dois div (s) flutuador em um recipiente que não tem uma altura fixa (ou sua altura é

Para forçar o recipiente para conter os dois div, você precisa limpar tanto o flutuador (s) antes de fechar o recipiente! Em outras palavras ....

CSS

<style>
#wrapper{
    width: 600px;
    background: gray;
}

#left{
    float: left;
    width: 150px;
    height: 80px;
    background: red;
}

#right{
    float: left;
    width: 450px;
    height: 150px;
    background: yellow;
}

.clearer{ clear: both;}
</style>

HTML

<div id="wrapper">
    <div id="left"></div>
    <div id="right"></div>
    <div class="clearer"></div>
</div>

Answer 5

Basta definir estilo estouro do pai para outra coisa senão visível e vai envolver o conteúdo filho.

Answer 6

A melhor solução que eu encontrei é semelhante ao de Rodrigo acima, mas sem a necessidade do caractere de espaço no conteúdo (e, portanto, não há necessidade de especificar o tamanho da fonte, quer). Se você faz uma classe que você pode aplicá-la a qualquer bloco recipiente, não apenas o seu invólucro. (Eu também sinto que não é melhor estilo de um ID, mas isso é uma questão diferente.)

.clearfix:after {
    clear: both;
    content: "";
    display: block;
    height: 0;
    visibility: hidden;
}
*:first-child+html .clearfix { /* Optional fix for IE7 */
    zoom: 1; 
}