Apanhando para posicionar footer
Galera, estou criando um layout que contém cabeçalho, três colunas e rodapé. Mas, infelizmente, não estou conseguindo posicionar corretamente o rodapé. O resto do layout está obedecendo corretamente minhas regras CSS mas o rodapé não.
O código-fonte da página é o seguinte:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <title> Página sem Nome</title> <meta http-equiv="pragma" content="no-cache" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-unicode" /> <meta name="robots" content="ALL" /> <meta name="distribution" content="Global" /> <meta name="rating" content="General" /> <meta name="author" content="Daniel A. Tiecher" /> <meta name="language" content="pt-br" /> <meta name="doc-class" content="Completed" /> <meta name="doc-rights" content="Public" /> <link rel="shortcut icon" href="http://localhost/img/favicon.ico" /> <base href="" /> <link rel="stylesheet" type="text/css" href="style.css" /></head><body><div id="wrap"> <div id="header"> <p> Cabeçalho </p> </div> <div id="nav"> <p> Navegação Principal </p> </div> <div id="main"> <p> Conteúdo Principal </p> </div> <div id="nav2"> <p> Navegação Secundária </p> </div> <div id="footer"> <p> Rodapé </p> </div></div></body></html>
E esse é o CSS da página:
/ CSS do Layout /html, body, #wrap { min-height: 100%; width: 100%; height: 100%;} html>body, html>body #wrap { height: auto; }#wrap { width: 750px; margin: 0 auto; text-align: left; position: relative; top: 0;}#header { heigth: auto; position: absolute; background: blue; width: 750px; }#main { top: 100px; width: 450px; position: absolute; left: 150px; background: green; }#nav { width: 150px; position: absolute; left: 0px; top: 100px; background: red; }#nav2 { width: 150px; position: absolute; right: 0px; top: 100px; background: yellow; }#footer { background: purple; position: absolute; bottom: 0; }
Se vocês testarem, verão que ao invés do footer se posicionar embaixo do resto do conteúdo, ele está se posicionando acima do header.
Já tentei mudar o código inúmeras vezes mas o maldito rodapé nunca vai parar onde eu quero. Sem falar que já fiz o teste em mais de um browser (Opera, Firefox e IE/Win).
Alguma idéia?
Discussão (4)
Carregando comentários...