[Resolvido] DIV auto ajustável

[Thyago Brasil 0]

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?

 

Alguem me da uma ajuda ai???

 

[]'s

 

Thyago

[William Bruno 1501]

Mostre como você está fazendo.

 

Esse 'problema' que você relatou, só acontece se a div filha, estiver fora do fluxo normal do documento, ou seja, com algum float ou position: absolute;

Se tiver float na div filha, coloque um elemento nivel de bloco com clear both logo após ela, mas ainda dentro da div pai.. se for position, repense na estrutura..

 

Enfim, poste um link ou o trecho do código simplificado sobre essa sua dúvida.

[Thyago Brasil 0]

E ae. 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!!! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[William Bruno 1501]

Pois é.. você fez exatamente oque eu disse: usou position: absolute;

Estude boxmodel, e posicione o #conteudoInterno, com margin, padding...

#conteudoInterno
{
  border-left: 2px solid #fc8e0c; 
  border-right: 2px solid #fc8e0c; 
  width: 712px; 
  min-height: 325px;
}

Não é para essas situações que o absolute é indicado.

eu costumo usar esse 'hack', para que o IE6 interprete o efeito de min-height, sem atrapalhar os outros browsers:

/* hack para IE6 que trata height como min-height */
* html #conteudoInterno  { height: 325px; }

é só adicionar essas linhas no teu css. O hack é o seletor: * html, q só o IE6 reconhece.

[Thyago Brasil 0]

O problema William é que quando tiro o position, a tela fica assim:

 

 

Esse posicionamento que as divs tomaram, podem ser corrigidas também com o margin e padding?

[William Bruno 1501]

Sim, podem ser corrigidos com margin e padding sim.

Como algumas imagens são pertinentes à tua dúvida, por causa dos backgrounds, é melhor que você poste um link para o teu site.

 

O position absolute, exceto em raros casos, não deve ser usado para estrutura o layout.

[Thyago Brasil 0]

Estou tentando usar o padding e o margin, porém, quando desce a div conteudoInterno, desce também a colCentralMaster. Nunca ficam no lugar que deveria. Essa div conteudoInterno, é onde vai o conteudo mesmo que seria um formulário ou alguma coisa escrita. A div colCentralMaster, seria o fundo do conteúdo. Por isso coloquei margin e padding nas duas

 

Tentei também colocar o position como relative mas não deu certo! A pagina continua da mesma forma. Tudo desorganizada

[Thiago Retondar 18]

Como sua dúvida está, também, relacionada à imagens, faça o upload desse página e disponibilize o link para nós.

 

Por enquanto, tente isso:

 

#conteudoInterno
{
  border-left: 2px solid #fc8e0c;
  border-right: 2px solid #fc8e0c;
  width: 712px;
  margin: 159px 0 0 0;
  min-height: 325px;
}

[Henrique Barcelos 290]

* html #conteudoInterno { height: 325px; }

é só adicionar essas linhas no teu css. O hack é o seletor: * html, q só o IE6 reconhece.

Só adicionando uma informação aqui, existe um hack para o min-height que funciona no IE6:

 

* html seletor {
	height: 325px;
	height: auto !important;
}

[Thyago Brasil 0]

Thiago,

 

Segue abaixo a imagem!!

 

 

Vou tentar o que você passou!!

 

Obrigado!! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

Abraço

[Thyago Brasil 0]

Com o margin, consegui que a tela ficasse desta forma:

 

 

Porém, ainda não esta descendo o rodapé e o fundo branco.

[Paulo de Tarso F. M. 24]

Só uma dica: amigo Thyago Henrique, quando for responder aos posts, não utilize este botão como vem utilizando: . Ele adiciona ao seu novo post todo o conteúdo do post que você clicou neste botão.

 

Esse botão serve para quando você quer responder diretamente para alguém, ele funciona como uma citação. Para responder sem copiar o conteúdo dos posts anteriores, utilize este botão:

 

Essa dica é válida para todos!

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Édipo Costa Rebouças 0]

é muita discussão pra coisa simples... http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif

 

só para acrescentar algo ao post, não precisa colocar o hack para ie6 do min-height num seletor especial.

[Thyago Brasil 0]

rs....o problema Édipo é que não esta dando certo! Ve a imagem que eu postei aí agora pouco. A div do conteudo esta aumentando. Até aí tudo certo, porém a div onde tem o fundo, não aumenta, a div do rodapé da página não desce.

 

[]'s

[Édipo Costa Rebouças 0]

joga uma pagina online num servidor furreca, ou um zip mesmo, fica mais facil do que só um peço do código, e ainda as vezes pode estar tendo alguma dependecia de outro css que você tenha feito.

[Thyago Brasil 0]

você tem algum msn onde possamos trocar uma idéia?

[Édipo Costa Rebouças 0]

usa o forum thyago, 2,3,4,5 cabeças pensam melhor do que uma... http://forum.imasters.com.br/public/style_emoticons/default/closedeyes.gif

[Thiago Retondar 18]

Edipio está coberto de razão. Aliás, é para isso que serve o fórum. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Thyago, coloque um link desse seu projeto para melhor visualizarmos. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Thyago Brasil 0]

eu não tenho como colocar um link no ar no momento. http://forum.imasters.com.br/public/style_emoticons/default/cry.gif

[William Bruno 1501]

É que tem imagens envolvidas..

Hospeda em qualquer servidor grátis, ou faz upload de tudo ai num zip.

 

Usa um servidor externo:

http://www.rapidshare.com/

 

É que precisamos acompanhar teu código atual.