[Resolvido] Layout Liquido

[Ecos 0]

Eu criei 4 Divs...

 

DIV #ALL

--- DIV #CONTEUDO

--- --- DIV #LEFT

--- --- DIV #CENTER

--- --- DIV #RIGHT

--- DIV #FOOTER

 

Acima é uma hierarquia que eu fiz.

Daí eu fiz o seguinte CSS pra elas:

 

#ALL{
width:100%;
min-height:100%;
position:relative;
padding:0px;
margin:0px;
}

* html #ALL{
  height: 100%;
}

#CONTEUDO{
  width:100%;
  height:auto;
}

#LEFT{
  float:left;
  width:15%;
  height:auto;
}
#CENTER{
  width:70%;
  margin:auto;
  float:left;
  height:auto;
}
#RIGHT{
  float:left;
  width:15%;
  height:auto;
}

#FOOTER{
  width:100%;
  line-height:35px;
  text-align:center;
  bottom:0px;

}

 

Mas eu queria que as DIVS #LEFT, #CENTER e #RIGHT fossem até a DIV #FOOTER que é o rodapé.

Mas como deixei height:auto, elas não vão. Mas também não posso determinar um tamanho fixo pra elas.

 

Daí o que eu pensei, eu coloco a cor das Divs laterais de cinza por exemplo e também faço isso pra DIV #CONTEUDO.

Dae fica cinza até lá embaixo, parecendo que as DIVS colaterais foram até o rodapé.

Dae a Div do Meio eu coloco o fundo Branco.

 

Mas não deu certo.

A Div CONTEUDO, quando olho no Dreamweaver vai até lá embaixo, mas na página não vai.

Dae as DIVS Laterais ficam com o tamanho automático.

 

\=

 

Como que faz isso ?

[Kaue Machado 0]

Já tentou aplicar um valor percentual para o height e limitar o minimo e máximo de pixels?

tipo isso: height: 75%; max-height: 600px; min-height: 400px;

você muda como achar melhor os valores, desse jeito o height vai variar de acordo com a resolução do usuário... (ou deveria, nunca usei em um projeto efetivo)

[William Bruno 1501]

Mas eu queria que as DIVS #LEFT, #CENTER e #RIGHT fossem até a DIV #FOOTER que é o rodapé.

leia:

 

http://maujor.com/tutorial/rodape-embaixo-da-janela.php

[Ecos 0]

Eu li o artigo William e inspecionei o código da página com muito conteúdo.

Porém, nao entendi muita coisa, pq está meio que parecido com meu código.

[Ecos 0]

William, Valeu!

Acho que consegui.

 

MEntira... =\

nao deu certo nao...

 

não consegui fazer.

eu estou olhando o código do maujor tentando ver o que eu nao fiz.

mas nao vai..

 

as colunas nao vao até o rodapé.

qual é a magica que faz isso ?

 

Descobri... ele faz isso pra ir até la embaixo.

Que loco!

#tudo{
background:url(../images/lateral.png) repeat-y left ;
}

 

mas tipo... eu só consigo fazer isso em um dos lados.

nao tem como fazer dos dois ?