height:auto min-height e float

[brcontainer 16]

Solução final para o BUG do FLOAT no FF ( Firefox )

 

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(ja foi bastante falado no forum)

[atualizado] Percebi recente que o isso tambem ocorre no Opera

 

Mas como fazer o efeito do display:table;??

foi então que eu percebi, 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 tbm

<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;
overflow:hidden;
background:#ddd;
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">1 </div>
</div>

[yogodoshi 0]

ÓTIMA DICA!

foi a única solucao para o meu problema!

 

brigadão cara!