mas tem alguma manha para eu posicionar todas em relação a essa DIV principal? eu estou posicionando a prindipal centralizada na página e cada uma das seguintes relativas em relação a anterior:
Cabeçalho centralizado
menu de cima, relativo em relação ao cabeçalho
menu da esquerda relativo em relação ao menu de cima
conteúdo relative em relação ao menu da esquerda
parte da direite em relative com relação ao conteúdo
rodapé em relative sobre a parte da direita
tem como vincular tudo e relação à div principal?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"><html xml:lang="pt-br" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="generator" content="PSPad editor, www.pspad.com"> <title></title> <style type="text/css"> #principal{ width:998px; margin:0 auto; } #header{ height:100px; background:red; } #menu{ height:65px; background:blue; } #colA, #colC{ width:200px; background:blue; } #colB{ width:598px; background:pink; } .cols{ float:left; } .clearFull{ clear:both; display:block; } </style> </head> <body> <div id="principal"> <div id="header"> <!--Cabeçalho -->Cabeçalho Aqui </div> <div id="menu"> <!--Menu Cima -->Menu Cima Aqui </div> <div id="colA" class="cols"> <!--Menu Esquerda -->Menu Esquerda Aqui </div> <div id="colB" class="cols"> <!--Menu Conteudo -->Conteudo Aqui </div> <div id="colC" class="cols"> <!--Menu Direita -->Menu Direita Aqui </div> <span class="clearFull"><!-- --></span> <div id="rodapé"> <!--Menu Esquerda --> Rodapé Aqui </div> </div> </body></html>Oi juris, ei fiz um modelo de layout ai, pra vc modificar, talvez a unica css que vc não entenda direito vai ser o clearFull, vou tentar explicar.
quando você declara que um elemento é float, ele vai se posicionar no topo do seu elemento pai, sem ultrapassar a borda, e ira também respeitar as bordas laterais.
a borda de baixo ele não respeita, o elemento pai, vai entender como se não tive-se nada dentro dele e vai ficar pequeno, enquanto o div declarado como float vai ultrapassar a borda debaixo(border-bottom) do div pai. no IE isso não acontece pois ele trata isso de uma maneira diferente de como deve se tratar tal coisa. para fazer o elemento pai entender que tem algo entre a borda superior e inferior do tamanho do div, se coloca um elemento abaixo do elemento que esta como float com a declaração que fiz do clearFull.
Esse declaração formata o elemento com a class="clearFull" com a largura do seu elemento pai(propriedade display:block), e faz ele ficar embaixo de qualquer elemento que ficaria flutando envolta dele (propriedade clear:both); sendo assim, o elemento pai vai se esticar até o tamanho onde esta o elemento com a classe clearFull.
