Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Estou com um problema no corpo de texto e rodapé do site.
Primeiramente vou expor o código aqui e depois explico o problema:
[table=html]
<div class="basetexto">
<div id="basetextodentro">
<div id="tituloquadrado">
<p><strong>Título</strong> </p>
</div>
Texto aqui!
</div>
</div>
<div id="baixot">
<div id="baixoc">
<div id="baixoendereco">
Endereço aqui!
</div>
</div>
</div>[/table][table=css]
.basetexto{
min-height:550px;
width:960px;
}
#basetextodentro{
width:960px;
min-height:500px;
position:absolute;
left:50%;
;
background-image:url(../../imagens/pag.png);
background-repeat:repeat-y;
}
#tituloquadradofont-size:18px;
font-family: 'Open Sans', sans-serif;
margin-bottom:12px;
text-align:left;
margin-left:15px;
margin-top:8px;
}
#textoquadradoheight:auto;
width:930px;
margin-left:15px;
margin-right:15px;
}
#baixotbackground-image:url(../../imagens/baixo.jpg);
height:101px;
background-repeat:repeat-x;
}
#baixocwidth:818px;
position:absolute;
height:auto;
margin-top:23px;
left:50%;
;
}
#baixoenderecocolor:#707070;
font-size:16px;
float:left;
margin-left:70px;
width:500px;
height:58px;
}[/table]
Entao, quando eu coloco um texto grande na div "basetextodentro" e ultrapassa a altura minima da div "base texto" ela se sobrepoem ao rodapé em vez empurra-lo um pouco mais pra baixo.
Fiz um teste e escrevi direto no "base texto" e ele empurrou o rodapé para baixo, em vez de sobrepor.
Como faço pra arrumar isso?
Tente usar position:relative; ao invés de position:absolute;
Mas usei position:absolute para deixar a div sempre centralizada
Coloquei aqui - http://jsfiddle.net/angelorubin/k49xnnf4
Tenta explicar melhor a distribuição deste layout, para ficar mais fácil de entendermos o problema.
Meu caro, costumo utilizar um método que talvez venha a te servir.
Crie uma classe de nome "clearfix" ou outro nome caso queira, e configure-a da seguinte maneira:
.clearfix {
position:relative;
clear:both;
height: 40px; /* Defina aqui o distanciamento entre o conteúdo e o final do elemento */
}Agora é só inclui-la antes da tag de fechamento do elemento que você deseja que tenha auto ajuste de altura.
Exemplo:
<div class="basetexto">
<div id="basetextodentro">
<div id="tituloquadrado">
<p><strong>Título</strong> </p>
</div>
Texto aqui!
</div>
<div class="clearfix"></div><!-- CLEARFIX deverá ser instanciada aqui !-->
</div><!-- FECHAMENTO DO ELEMENTO QUE VOCÊ DESEJA "ELASTECER" !-->Espero ter ajudado, abraços.
Tente usar position:relative; ao invés de position:absolute;