Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Bem, o meu problema é o seguinte:
Tenho duas DIVs principais ("div_um" e "div_dois");
Na primeira DIV existe outra DIV ("box"), que por sua vez possui outras três DIVs("div_a", "div_b" e "div_c");Obs. Coloquei um MIN-HEIGHT: 300PX só para simbolizar um texto maior que a DIV mãe.
Ai que entra o problema!
Quando o tamanho da div_a excede o MIN-HEIGHT da div_um, ela não empurra a div_dois, nem muito menos aumenta o tamanho da div_um. Ela simplesmente passa por cima da div_dois ou joga ela para o lado quebrando todo o layout.
Vou deixar abaixo o código HTML e o CSS para facilitar a compreensão.
CÓDIGO HTML:
<body>
<div id="div_um">
<div id="box">
<div id="div_a"></div>
<div id="div_b"></div>
<div id="div_c"></div>
</div>
</div>
<div id="div_dois"></div>
</body>* {margin:0; padding:0;}
#div_um {
background: #00F repeat-x center top;
text-align: center;
height: auto;
min-height: 200px;
width: 100%;
min-width: 900px;
}
#box {
height: auto;
min-height: 200px;
width: 900px;
margin: 0px auto;
}
#div_a {
background: #F00 no-repeat right center;
height: auto;
min-height: 300px;
width: 150px;
float: left;
}
#div_b {
background: #FF0 center;
height: auto;
min-height: 300px;
width: 600px;
float: left;
}
#div_c {
background: #F0F no-repeat left center;
height: auto;
min-height: 300px;
width: 150px;
float: left;
}
#div_dois {
background: #0F0 repeat-x center top;
height: 200px;
width: 100%;
min-width: 900px;
}E também o link do modelo hospedado.
Desde já agradeço, DB
Carregando comentários...