Rodapé no CSS

[KervinRox]

Estou com problemas para deixar o rodapé no rodapé da página. Já ví varios tutoriais, mas não consigo.

Eu coloco 4 divs.

<div id="all">

<div id="top"></div>

<div id="mid"></div>

[KervinRox]

Estou com problemas para deixar o rodapé no rodapé da página. Já ví varios tutoriais, mas não consigo.

Eu coloco 4 divs.

<div id="all">
  <div id="top"></div>
  <div id="mid"></div>
  <div id="bot"></div>
</div>

E o css: Indico ao navegador que a altura do site é sempre 100%

* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    }

* html #all {
    height: 100%;
    }

#all{
    position: relative;
    min-height: 100%;
}
#top{
    height: 160px;
}
#mid{
    padding-bottom: 50px;
}
#bot{
    position: absolute;
    bottom: 0;
}

Acho que o problema é que o #mid não acompanha o conteúdo na altura. O conteúdo sempre ultrapassa a altura do #mid.

E o #bot fica por cima do #mid.

Editado Agosto 5, 2010 por KervinRox

[Victorgg]

Pode postar o código html e o css da página em questão?

[Victorgg]

Cara, troca o bot pra "position:relative" Como ele esta absolute ele não se importa se tem outro elemento html encima.

Creio que é isso !

[_Vinny_]

Um ótimo tutorial:

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

[KervinRox]

Ainda não consegui.

Victor, colocar o position: relative; não resolveu. :(

_Vinny_, eu usei esse tutorial para fazer o layout do site. :(

O conteúdo que está contido na div#mid ultrapassa e o div#bot fica em cima do conteúdo da div#mid

[Matheus Matos]

Cara, não é por nada não mais dessa forma fica ruim tu consiguir algo.

É bem melhor você utilizar float do que position. Vejamos, quatro divs:

<div id="all">
  <div id="top"></div>
  <div id="mid"></div>
  <div id="bot"></div>
</div>

O css ficaria assim:

#all {
position: absolute;
top: 0px; left: 50%; margin-left: -480px;
width: 960px; min-height: 100%;
}

#top  {float: left; width: 960px; height: 200px;}
#mid {float: left; width: 960px;}
#bot  {float: left; width: 960px; height: 200px;}

Já ficará organizado, topo no topo, meio no meio, e rodapé no rodapé.

Se quiser saber mais sobre position, clique aqui, e se quiser saber mais sobre float, clique aqui.

Qualquer dúvida poste!

Abraços

Matheus Matos

[Matheus Matos]

Tópico duplicado. http://scriptbrasil.com.br/forum/index.php...=152595&hl=

Segundo as regras isso não é contra as regras!!!

E aí o que faz? Algum administrador, monitor ou moderador poderia dizer? Ou esse ato que estou tendo de avisar está errado? Alguém pode esclarecer por favor? Grato. :D

Abraços

Matheus Matos

[*FIT*]

Tópicos mesclados, não abra 2 posts iguais com intuito de tirar a mesma dúvida!