Faça com que o div externo tenha automaticamente a mesma altura de seu conteúdo flutuante

Eu quero o exterior div, que é preto, para envolver seus divs flutuantes dentro dele. Não quero usar style='height: 200pxno divcom o outerdivid, pois quero que seja automaticamente a altura de seu conteúdo (por exemplo, os flutuantes div).

<div id='outerdiv' style='border: 1px solid black;background-color: black;'>
<div style='width=300px;border: red 1px dashed;float: left;'>
    <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>

<div style='width=300px;border: red 1px dashed;float: right;'>
    <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
</div>

Como fazer isso?

Você pode definir o outerdivCSS de para este

#outerdiv {
    overflow: hidden; /* make sure this doesn't cause unexpected behaviour */
}

Você também pode fazer isso adicionando um elemento no final com clear: both. Isso pode ser adicionado normalmente, com JS (não é uma boa solução) ou com :afterpseudoelemento CSS (não amplamente suportado em IEs mais antigos).

O problema é que os contêineres não se expandem naturalmente para incluir filhos flutuantes. Esteja avisado ao usar o primeiro exemplo, se você tiver quaisquer elementos filhos fora do elemento pai, eles serão ocultados. Você também pode usar 'auto' como o valor da propriedade, mas isso invocará barras de rolagem se algum elemento aparecer fora.

Você também pode tentar flutuar o contêiner pai, mas dependendo do seu projeto, isso pode ser impossível / difícil.

Em primeiro lugar, eu recomendo fortemente que você faça seu estilo CSS em um arquivo CSS externo, ao invés de fazê-lo embutido. É muito mais fácil de manter e pode ser mais reutilizável usando classes.

Resolvendo a resposta de Alex (e clearfix de Garret) de "adicionar um elemento no final com clear: both", você pode fazer assim:

    <div id='outerdiv' style='border: 1px solid black; background-color: black;'>
        <div style='width: 300px; border: red 1px dashed; float: left;'>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
        </div>

        <div style='width: 300px; border: red 1px dashed; float: right;'>
            <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
        </div>
        <div style='clear:both;'></div>
    </div>

Isso funciona (mas como você pode ver, CSS inline não é tão bonito).

Você pode querer tentar flutuadores de fechamento automático, conforme detalhado em http://www.sitepoint.com/simple-clearing-of-floats/

Então, talvez tente overflow: auto(geralmente funciona) ou overflow: hidden, como disse o alex.

Eu sei que algumas pessoas vão me odiar, mas eu descobri display:table-cell para ajudar nesses casos.

É muito mais limpo.

Em primeiro lugar, você não deve usar width=300pxessa configuração de atributo para a tag, não CSS, use width: 300px;.

Eu sugeriria aplicar a clearfixtécnica no #outerdiv. Clearfix é uma solução geral para limpar 2 divs flutuantes para que o div pai se expanda para acomodar os 2 divs flutuantes.

<div id='outerdiv' class='clearfix' style='width:600px; background-color: black;'>
    <div style='width:300px; float: left;'>
        <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
    </div>

    <div style='width:300px; float: left;'>
        <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
    </div>
</div>

Aqui está um exemplo de sua situação e o que Clearfix faz para resolvê-la.

Use jQuery:

Definir altura pai = offsetHeight filho.

$(document).ready(function() {
    $(parent).css("height", $(child).attr("offsetHeight"));
}

Usar clear: both;

Passei mais de uma semana tentando descobrir isso!