Min-height (altura mínima) para elementos de bloco com CSS
Postado por: Pedro Rogério emUm grande problema que atormenta a vida dos desenvolvedores, quando se trabalha com elementos de bloco (divs), é definir uma altura mínima para eles. Isso ocorre quando se tem uma imagem com float e um texto correndo logo ao lado, se o texto não tem a altura da imagem, o conteúdo que está logo abaixo do texto também será mostrado ao lado da imagem, pois a div que tem o conteúdo, toma a altura do texto, ao invés de tomar automaticamente a altura da imagem. Vejam o que acontece nesse exemplo.
Para solucionar esse problema, basta selecionar uma altura mínima para o elemento que contém o texto e a imagem:
HTML
Utilize-se de uma div como container e coloque dentro uma imagem e um texto decritivo.
<div id="box">
<img src="Imagem_de_exemplo.gif" alt="Imagem de Exemplo" title="Imagem de Exemplo" />
<p>Conteúdo da div box</p>
</div>
CSS
#box {
min-height:128px;
height:auto !important;
height:128px;
padding:5px;
}
#box img {
float:left;
}
A propriedade min-height estabelece uma altura mínima para o elemento, esta propriedade não funciona no Internet Explorer, sendo que ele interpreta o atributo height como min-height, por isso estabeleci height:128px;. Agora paras os browsers que interpretam corretamente a propriedade height e min-height, não tenham uma altura fixa, por isso foi utilizado height: auto !important, estabelhecendo-lhe uma altura automática, dando-lhe uma maior prioridade a esta declaração fazendo o uso de !important, que não é interpretada pelo Internet Explorer. Agora vejam um exemplo do efeito funcionando corretamente.
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o Pinceladas da Web também escreve para o CSS no Lanche, blog voltado ao desenvolvimento front-end.
Interessante esta técnica….
Para este caso em especial, outra coisa que resolve o caso é colocar uma div no final com clear:both…
mas em alguns outros casos que demandam uma altura mínima, o clear:both nao resolve…
valeu pela dica! :)
obrigado, falicitou a minha vida
Bacana este esquema, mas estou com uma dúvida, por exemplo tenho 2 divs… ambas float:left; e largura definida, gostaria de acordo que eu aumento a div da esquerda aumenta a da direita, estou deixando como auto a altura mas não esta funcionando, tem outro modo ?
o ie 7 tbm não conhece o !important ?
Cara, muito legal, excelente solução! Parabéns!
continuamos com o grande problema que nos atormenta.
essa solução não resolve quando temos duas divs, uma do lado da outra.
por exemplo eu tenho uma div geral, e duas divs internas, uma esquerda e uma direita, ambas com float:left setado, pois tenho interesse que elas permaneçam lado a lado. se eu aumentar o conteudo da esquerda de forma que ele ultrapasse o tamanho da div geral, esta não deformará,
dando um erro no layout.
e essa solução não resolve isso. portanto o grande problema continua :( infelizmente. acho melhor voltarmos para as antigas tabelas, não tinha esse problema.
Pedro, valeu… essa foi na medida do meu problema, ajudou legal.
Olá.
Testei a dica, mas o que acontece aqui no ie6 é que a height da minha div ficou fixa, e não está crescendo se o conteúdo ultrapassar o valor da min-heigh.
Alguem pode me ajudar?
Abração!
@Ewaldo,
É estranho por que acabei de testar, em 2 sites diferentes essa técnica, e funciona normal no IE 6!!!
ôrra. Valeu a dica. Salvou.
Obrigado pela dica!
Facilitou a minha vida ;)
Salvou o dia!
Muito obrigado pela dica!
Para Jair Humberto
Este problema se resolve quando se cria uma div fictícia dentro da sua div geral, embaixo das duas div com float, com a propriedade clear: both e com a width do tamanho da sua div geral.
Aqui resolveu tranquilamente.
Beleza pedro
funfou certinho a dica no FF3 e no ie7 paulada power
vlw pela dica
Rapaz, salvou minha alma do bugatório.
Valeu Pedro! Mais uma vez suas dicas salvando meu dia!!!
Valeu pela dica…. funcionou aqui!
Vou deixar uma para a galera que precisa testar o CSS em vários navegadores, pois como sabemos a maravilha do IE muda a cada versão. então achei uma ferramentazinha na net interessante para isso. Chama-se MultipleIE. Postei algo no meu site sobre essa ferramenta (http://www.gouveia.eng.br/artigo/Para-facilitar-o-webdesign-multiplas-versoes-do-IE-no-seu-PC)
abraços
Obrigado pela explicação. Com o exemplo tudo ficou mais claro!
Obrigado, salvou o dia
Salvou minha madrugada, vou até dormir feliz.
O IE reconhece o min-height SIM!!! Basta que a div em questão esteja com display como BLOCK, TABLE, etc… Tanto no 7 como 8
Olá Pedro parabenz pelo seu trabalho! Ví que vc entende pacas de CSS. Por isso peço humildemente uma ajuda que tem um pouco a ver com o tema do post. È o seguinte, to construindo um site de anúncios e ja Tá praticamente pronto. O único problema é a barra lateral da direita(side bar right). No frontend ela fica alinhada corretamente mas quando eu carrego uma página que contenha mais arquivos ou posts ela desce acompanhando a página deixando de ficar alinhada no topo. E se eu carregar um widget por exemplo na barra lateral esquerda a direita também acompanha. Já não sei mais oque fazer já perdi uns dois dias com isso e nada! Se vc ou alguém puder me ajudar ficarei imensamente agradecido agradecido, valeu… abraço
Posta o link aí pra gente dar uma olhada no código.