Solução para height:auto;+float:;

[hipnos na area]

que tal deixa o BUG do display:table de lado

foi pensando assim que sem querer(foi mesmo hehe quando me deparei fiz isso sem perceber-me refiro a plataforma-)

para criar o efeito MIN-HEIGHT no IE6 fiz isso

usei !important (que o IE não interpreta)

forçando assim o height:300px; não ser reconhecido pelo FF e o HEIGHT:AUTO; não ser reconhecido pelo IE

continuando todos sabem que eu poderia simplismente deixar por isso

mas me deparei que se eu aplica-se FLOAT nos elementos internos o DIV pai não acompanhava

ae passei a usar DISPLAY:TABLE; porem no FF há um BUG

Para saberem mais sobre esse BUG:

http://elmicox.blogspot.com/2007/06/bugs-f...no-ie-e-ff.html

então eu percebi que ao criar uma plataforma(elemento inferior aos que possuem FLOAT)

com CLEAR:BOTH; ele "encerra" o float e "reativa" o height auto

coloquei um conteudo(texto) no elemento plataforma por que as vezes pode ocorrer dele não interpretado =/

mas me deparei com isso ficava um espaço inferior de media de 5px(varia da configuração da fonte do navegador)

então eis que simplismente apliquei overflow:hidden;(para gerar uma barra de rolagem ocuta)

e em seguida apliquei height:1px;(para que o overflow funcione)

pronto um efeito MIN-HEIGHT sem problemas

e um efeito HEIGHT:AUTO; sem necessidade de DISPLAY:TABLE; e sem problemas também

<style>
#pai{
background:#fc0;
width:500px;
height:auto !important;
min-height:300px;
height:300px;
}
#div1{
float:left;
}
#div2{
float:right;
}
#div1,#div2{
margin:2px;
background:#ddd;
width:120px;
height:auto !important;
min-height:200px;
height:200px;
}
#plataforma{
display:block;
oveflow:hidden;
height:1px;
clear:both;
}
</style>
<div id="pai">
<div id="div1">
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
</div>
<div id="div2">
2<br>
2<br>
2<br>
2<br>
2<br>
2<br>
2<br>
2<br>
2<br>
2<br>
2<br>
2<br>
2<br>
2<br>
2<br>
2<br>
</div>
<div id="plataforma"> </div>
</div>

Editado Dezembro 6, 2007 por hipnos na area