Div container principal

[Superwagtel 1]

Olá pessoal, estou com uma dificuldade com a div principal

 

Tenho esta div denominada "principal", dentro dela eu carrego todas a outras.

 

Mas esta div não está acompanhando o height:auto da página inteira.

Ela deveria deixar um bakgroun:#FFF; mas não ocorre.

 

#principal{

width:960px;

height:auto;

margin: 0 auto 0 auto;

background:#FFF;

}

 

Como o body da página é cinza claro, a página inteira está desta cor:

 

body{

background:#EBEBEB;

}

 

Alguém pode me dizer onde estou errando?

[André do Vale 76]

Height auto? Uma div é um elemento em nível de bloco. Ele não se expande, a não ser que você declare o html, body e esta div com alturas de 100%. E, se houver elementos acima ou abaixo desta mesma div, ainda encontrará problemas com a altura, devendo utilizar o calc().

 

Agora, caso você queira que a altura dela aumente de acordo com os filhos, tem de se ter o cuidado que, caso os filhos sejam flutuantes, ele não possuirá altura, pois, literalmente, os filhos estão 'voando'. Para corrigir, mude o display dela para inline-block.

 

Mas, em todo caso, coloque um link e especifique o problema, pois, somente com trechos de código fica complicado ajudar.

[Superwagtel 1]

Olá André:

 

Gostei de sua explanação, vejo que meus conhecimentos ainda estão pequenos.

 

Eu acrescentei à div "principal" o display:inline-block e funcionou perfeitamente

 

Você poderia me explicar um pouco sobre o porque faltava este display?

 

http://www.oclusivo.com.br/site/index.asp

[André do Vale 76]

Este display é apenas uma das várias alternativas para se 'concertar' a visualização de uma div pai com elementos filhos flutuantes. Há outras soluções.

 

Para estudos:

https://css-tricks.com/all-about-floats/

http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best