Div Height aumentando automaticamente CSS

[Victor Torezani 0]

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;

}

#tituloquadrado

{

font-size:18px;

font-family: 'Open Sans', sans-serif;

margin-bottom:12px;

text-align:left;

margin-left:15px;

margin-top:8px;

}

#textoquadrado

{

height:auto;

width:930px;

margin-left:15px;

margin-right:15px;

}

#baixot

{

background-image:url(../../imagens/baixo.jpg);

height:101px;

background-repeat:repeat-x;

}

#baixoc

{

width:818px;

position:absolute;

height:auto;

margin-top:23px;

left:50%;

;

}

#baixoendereco

{

color:#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?

[joaohenrique010 0]

Tente usar position:relative; ao invés de position:absolute;

[Victor Torezani 0]

Tente usar position:relative; ao invés de position:absolute;

 

Mas usei position:absolute para deixar a div sempre centralizada

[angelorubin 142]

Coloquei aqui - http://jsfiddle.net/angelorubin/k49xnnf4

 

Tenta explicar melhor a distribuição deste layout, para ficar mais fácil de entendermos o problema.

[Lucas Santos Brito 12]

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.