Erro com postion: absolute

[Alisson Acioli 0]

Olá, estou desenvolvendo um website e me encontrei com um problema.

Eu tenho uma div (com background preto) e coloquei uma outra encima dela (com background branco) com o position:absolute depois usei top e left.

O site ficou assim:

 

http://imageshack.us/photo/my-images/845/imagemvs.jpg/

 

fui colocando o conteudo, só que quando coloquei muito conteudo, ficou assim:

 

http://imageshack.us/photo/my-images/718/imagem2zv.jpg/

 

E não sei o que fazer.

Abaixo meu código CSS:

 

A div responsavel pelo fundo branco (que é o que tem que ficar por cima) se chama #background-white e o background preto é #topo-background

 

body{padding:0; margin:0; background:#CCC;}
#topo-background{width:100%; height:200px; background:#000;}
#background-white{width:1150px;height:1280px;background:#FFF;margin: 0 auto;position:absolute;top:162px;left:54px;margin:0;padding:0;
}
#menu{color:#fff;float:right;margin-right:20px;margin-top:5px;font-family: Calibri;font-size:18px;}
#logo{padding: 35px 0 0 35px;}
#menu ul{padding:0px;margin:0px;float: left;list-style:none;}
#menu ul li { display: inline; }
#menu ul li a {padding: 7px 20px;float:left;color: #FFF;text-decoration: none;font-family:Calibri;font-size:18px;}
#foto{padding:10px 0 0 50px;margin:0;float:left;}
#depoimento{float:right;padding-right:45px;padding-top:10px;}
#box-depoimento{background:url(../images/background-depoiments.jpg) repeat-x; width:255px;height:280px;border:1px solid #000;padding:0;margin:0;}
#barra-dep{background:url(../images/barra-depoimento.jpg) repeat-x;width:247px;height:37px;margin:0;padding:6px 0 0 8px;font-family:Calibri;font-size:22px;color:#fff;}
.clear{clear:both;}
#content{padding-top:25px;}
#barra-msg{background:#000;width:96%;height:42px;color:#fff;font-family:"Arial Black", Gadget, sans-serif;font-size:20px;padding:10px 0 0 46px;}
#content-left{float:left;padding-left:20px;padding-top:20px;font-family:Calibri;font-size:15px;width:825px;}
#content-right{float:right;padding-right:40px;padding-top:30px;}
#imagem-dep{float:left;padding: 10px 0 0 15px;}
#empresa-dep{float:right;padding: 10px 35px 0 0;font-family:Calibri;font-size:30px;color:#9A9A9A;}
#depoimento-user{font-family:Calibri;font-size:15px;color:#999;font-style:italic;padding:13px 0 0 12px;}
#rodape{position:absolute; bottom:0;width:100%;}
#rodape-msg{float:right;padding-right:20px;font-style:italic;font-size:15px;font-family:Calibri;}

[William Bruno 1501]

desnecessário usar position absolute;

 

faça o fundo preto como bg do body, e então sem position coloque o teu conteudo.

[Alisson Acioli 0]

Mas você viu as imagens?

 

Tipo o Body to usando com o BG #CCC

O Topo to com uma div de uns 150px de height com o BG #000

E outra div de conteúdo com o BG #FFF

 

Só que a BG #FFF tem que ficar acima do BG #000 e sobreposta um pouco acima como na 1° imagem.

[William Bruno 1501]

vi as imagens sim..

 

a solução inteligente, é usar cor + bg imagem no body.

 

Assim:

http://imageshack.us/photo/my-images/62/imagemvs.gif/

 

entendeu ? repeat-y nesse filete, e completa para baixo dele com o background-color

ai você descarta a necessidade do position, tudo funciona bonito e pronto.