Lay-out líquido

[Guga01 0]

Olá pessoal!

 

Estou me batendo para acertar um lay-out e gostaria da ajuda de vocês.

A idéia básica deste lay-out é ter 3 colunas: a da esquerda tem 100px, a do meio 258px e a da direita preenche o restante da tela. Além disso, a altura das colunas deve, no mínimo, preencher toda a tela.

 

O código que tenho é:

 

CSS:

*
{
padding:0;
margin:0;
}

body
{
margin:0;
padding:0;
text-align:left;
}

#tudo
{
min-width:100%;
min-height:100%;
width:100%;
background:#00F;
}

#areaMenu
{
display:inline;
float:left;
width:100px;
min-height:100%;
text-align:left;
background:#000;
}

#areaSubmenu
{
float:left;
width:258px;
min-height:100%;
text-align:left;
background:#F93;
}

#areaConteudo
{
min-height:100%;
margin-left:358px;
text-align:left;
background:#3F6;
}

 

 

HTML:

<div id="tudo">
	<div id="areaMenu">
	</div> <!-- Fim da div areaMenu -->
	<div id="areaSubmenu">
	</div> <!-- Fim da div areaSubmenu -->
	<div id="areaConteudo">
	</div> <!-- Fim da div areaConteudo -->
</div> <!-- Fim da div tudo -->

 

 

O que está errado? Obrigado.

[NetBoy16 72]

Mas oque está dando errado?

Pode colcar o link do site pf ?

Seria a areaConteudo que preencheria todo o restante da tela? entao coloca um width:100% tb :)

[Marrabel 20]

Hum, tira essa margin do "areaConteudo".

 

E faça o que o NetBoy disse.

 

Faz o teste ai e volte a postar. :thumbsup:

[Guga01 0]

Olá NetBoy16!

 

As colunas, na largura, estão certas. Mas a altura não fica com um mínimo de 100% da tela.

[Marrabel 20]

Adicione no "#tudo":

 

position:absolute;

[Diéssica 140]

Faux Columns:

:seta: http://maujor.com/tutorial/lay2col-faux-colunm.php

:seta: http://forum.imasters.com.br/topic/309442-solucao-para-faux-columns-sem-usar-imagens/

 

Ou então

height:100%

que não recomendo muito...

:bye: