Problema com div auto ajustável

[Thyago Henrique]

Pessoal,

Estou montando o layout de um sistema para web e estou com o seguinte problema. A DIV central é auto ajustável, ou seja, o tamanho é definido conforme o conteúdo. O problema é: Preciso colocar outra div dentro só que quando tem uma div dentro da outra a div pai (Central), não aumenta. O que posso fazer?

Segue abaixo o código HTML e CSS. :rolleyes:

-> HTML

<div id="colEsq">
            <div id="sepEsqcolCentral">
                <div id="conteudoPagina">
                    <div id="colCentralMaster">
                        <div id="conteudoInterno">
                            ESTA É A COLUNA QUE TERIA DE AUMENTAR CONFORME O CONTEÚDO
                            ESTA É A COLUNA QUE TERIA DE AUMENTAR CONFORME O CONTEÚDO
                            ESTA É A COLUNA QUE TERIA DE AUMENTAR CONFORME O CONTEÚDO
                            ESTA É A COLUNA QUE TERIA DE AUMENTAR CONFORME O CONTEÚDO
                            ESTA É A COLUNA QUE TERIA DE AUMENTAR CONFORME O CONTEÚDO
                            ESTA É A COLUNA QUE TERIA DE AUMENTAR CONFORME O CONTEÚDO
                            ESTA É A COLUNA QUE TERIA DE AUMENTAR CONFORME O CONTEÚDO
                            ESTA É A COLUNA QUE TERIA DE AUMENTAR CONFORME O CONTEÚDO
                            ESTA É A COLUNA QUE TERIA DE AUMENTAR CONFORME O CONTEÚDO
                            ESTA É A COLUNA QUE TERIA DE AUMENTAR CONFORME O CONTEÚDO
                            ESTA É A COLUNA QUE TERIA DE AUMENTAR CONFORME O CONTEÚDO
                        </div>
                    </div>
                    <div id="rodapeConteudo"></div>
                </div>
            </div>
            <div id="rodapePagina"></div>          
        </div>

-> CSS

#colEsq 
{
  width: 943px;
}

#sepEsqcolCentral 
{
  margin:0;
}

#sepEsqcolCentral 
{
  margin-left:200px;
  padding-left:2px;
}

#conteudoPagina 
{
  width: 737px;
  min-height: 450px;
  background-color:#FFFFFF;
  padding:1px 1px;
  border-right: 2px solid #ff8a00;
} 

#colCentralMaster
{
  background-image: url('images/home_promissao.png');
  background-repeat:no-repeat;
  background-position:center;
  vertical-align:top;
  width: 735px;
  min-height: 358px;
}

#conteudoInterno
{
  border-left: 2px solid #fc8e0c; 
  border-right: 2px solid #fc8e0c; 
  width: 712px; 
  position: absolute;
  top: 159px; 
  left: 212px; 
  min-height: 325px;
}

#rodapeConteudo
{
  background-image: url('images/master_10.png');
  width: 735px;
  height: 32px;
}

#rodapePagina
{
  width:943px;
  height:19px;
  background-image: url('images/master_11.png');
}

Me disseram que o min-height não funciona em alguns browsers. Será que pode estar interferindo em alguma coisa também?

Desde já, obrigado!!! :D

Editado Maio 27, 2009 por Thyago Henrique

[Eliseu M.]

porque não aumenta? Acho que é porque você colocou pouco conteúdo, daí não chegou ao tamanho de 325px. Veja se é isso mesmo. Té +!

[Thyago Henrique]

porque não aumenta? Acho que é porque você colocou pouco conteúdo, daí não chegou ao tamanho de 325px. Veja se é isso mesmo. Té +!

Infelizmente não é esse o problema :( Veja na imagem abaixo o que esta acontecendo.

Abraço

T+

[Eliseu M.]

Tenta isso: text-align:justify; na div conteudoInterno.

Ah... se n resolver, envia as imgs que você colocou pra ficar melhor pra gente resolver :D

Editado Maio 26, 2009 por Eliseu M.

[Thyago Henrique]

Tenta isso: text-align:justify; na div conteudoInterno.

Ah... se n resolver, envia as imgs que você colocou pra ficar melhor pra gente resolver :D

Na verdade já tenho isso no meu código. Vou postar aqui pra você ver a estrutura da pagina, o css e a imagem de como esta a pagina.

>>HTML

<div id="colEsq">
  <div id="sepEsqcolCentral">
    <div id="conteudoPagina">
      <div id="colCentralMaster">
        <div id="conteudoInterno">
          ESTA É A COLUNA QUE TERIA DE AUMENTAR CONFORME O CONTEÚDO
          ESTA É A COLUNA QUE TERIA DE AUMENTAR CONFORME O CONTEÚDO
          ESTA É A COLUNA QUE TERIA DE AUMENTAR CONFORME O CONTEÚDO
          ESTA É A COLUNA QUE TERIA DE AUMENTAR CONFORME O CONTEÚDO
          ESTA É A COLUNA QUE TERIA DE AUMENTAR CONFORME O CONTEÚDO
          ESTA É A COLUNA QUE TERIA DE AUMENTAR CONFORME O CONTEÚDO
          ESTA É A COLUNA QUE TERIA DE AUMENTAR CONFORME O CONTEÚDO
          ESTA É A COLUNA QUE TERIA DE AUMENTAR CONFORME O CONTEÚDO
          ESTA É A COLUNA QUE TERIA DE AUMENTAR CONFORME O CONTEÚDO
          ESTA É A COLUNA QUE TERIA DE AUMENTAR CONFORME O CONTEÚDO
          ESTA É A COLUNA QUE TERIA DE AUMENTAR CONFORME O CONTEÚDO
          ESTA É A COLUNA QUE TERIA DE AUMENTAR CONFORME O CONTEÚDO
          ESTA É A COLUNA QUE TERIA DE AUMENTAR CONFORME O CONTEÚDO
          ESTA É A COLUNA QUE TERIA DE AUMENTAR CONFORME O CONTEÚDO
          ESTA É A COLUNA QUE TERIA DE AUMENTAR CONFORME O CONTEÚDO
          ESTA É A COLUNA QUE TERIA DE AUMENTAR CONFORME O CONTEÚDO
          ESTA É A COLUNA QUE TERIA DE AUMENTAR CONFORME O CONTEÚDO
          ESTA É A COLUNA QUE TERIA DE AUMENTAR CONFORME O CONTEÚDO
          ESTA É A COLUNA QUE TERIA DE AUMENTAR CONFORME O CONTEÚDO
          ESTA É A COLUNA QUE TERIA DE AUMENTAR CONFORME O CONTEÚDO
          ESTA É A COLUNA QUE TERIA DE AUMENTAR CONFORME O CONTEÚDO
          ESTA É A COLUNA QUE TERIA DE AUMENTAR CONFORME O CONTEÚDO
          ESTA É A COLUNA QUE TERIA DE AUMENTAR CONFORME O CONTEÚDO
          ESTA É A COLUNA QUE TERIA DE AUMENTAR CONFORME O CONTEÚDO
          ESTA É A COLUNA QUE TERIA DE AUMENTAR CONFORME O CONTEÚDO
          ESTA É A COLUNA QUE TERIA DE AUMENTAR CONFORME O CONTEÚDO
          ESTA É A COLUNA QUE TERIA DE AUMENTAR CONFORME O CONTEÚDO
          ESTA É A COLUNA QUE TERIA DE AUMENTAR CONFORME O CONTEÚDO
          ESTA É A COLUNA QUE TERIA DE AUMENTAR CONFORME O CONTEÚDO
          ESTA É A COLUNA QUE TERIA DE AUMENTAR CONFORME O CONTEÚDO
          ESTA É A COLUNA QUE TERIA DE AUMENTAR CONFORME O CONTEÚDO
          ESTA É A COLUNA QUE TERIA DE AUMENTAR CONFORME O CONTEÚDO
          ESTA É A COLUNA QUE TERIA DE AUMENTAR CONFORME O CONTEÚDO
        </div>
      </div>
      <div id="rodapeConteudo"></div>
    </div>
  </div>
  <div id="rodapePagina"></div>          
</div>

>>CSS

#colEsq 
{
   width: 943px;
}

#sepEsqcolCentral 
{
   margin:0;
}
            
#sepEsqcolCentral 
{
   margin-left:200px;
   padding-left:2px;
}

#conteudoPagina 
{
    width: 737px;
    min-height: 450px;
    background-color:#FFFFFF;
    padding:1px 1px;
    border-right: 2px solid #ff8a00;
}

#colCentralMaster
{
    background-image: url('images/home_promissao.png');
    background-repeat:no-repeat;
    background-position:center;
    vertical-align:top;
    width: 735px;
    min-height: 358px;
    margin: -240px -10px;
    padding: 10px;
    position: relative;
}

#conteudoInterno
{
  border-left: 2px solid #fc8e0c;
  border-right: 2px solid #fc8e0c;
  width: 702px;
  margin: 275px 0 0 8px;
  padding: 20px 5px 5px 5px; 
  min-height: 325px;
  text-align: justify;
}

#rodapeConteudo
{
    background-image: url('images/master_10.png');
    width: 735px;
    height: 32px;
}

#rodapePagina
{
    width:943px;
    height:19px;
    background-image: url('images/master_11.png');
}

>>Imagem:

Editado Maio 27, 2009 por Thyago Henrique