Site ultrapassando o limite da página

Pessoal,

Montei um layout usando duas colunas (esquerda e direita), um topo, um rodapé e tela principal onde as páginas irão aparecer.

Porém abaixo do rodapé há um espaço em branco muito grande. Tentei fazer várias modificações, mas nada de resolver, sou iniciante em CSS, Criei várias DIVS que estão no código abaixo.

body {
color:#333; /texto na cor preta, por padrão/
margin: 0; / Define uma margem em volta do box/
font: 12px/1.4 Verdana, Arial, Helvetica, sans-serif; / Define fonte/

 text-align: center;
 }

#tudo {

 width: 100%;
 height:611px;
 margin:0 auto;
 text-align:left; /* Alinha texto para a esquerda*/
 position:absolute;
 top:250px;
 left:450px;
}

#topo {
 width:1020px;
 height:102px;
 background:#ccc 0 url('../fotos/banner10.jpg') no-repeat;
 position:relative;
 top:-247px;
 left:-220px;
 text-align:center;
 }

#topo h1 {

 position:absolute;
 left:250px;
 top:25px;
 font-size:28px;
 margin:0;
 }

#principal {
 width:1020px;
 height:640px;
 position:relative;
 margin:0;
 top:-255px;
 left:-220px;
 overflow:hidden;
 border:3px;
 /*background:#ccc 0 url('imagens/') no-repeat;*/
 }

#topo h1 {

 position:absolute;
 left:250px;
 top:25px;
 font-size:28px;
 text-align:center;
 font-weight:bold;
 color:blue;
 margin:0;
 }

#rodape {
 width:1475px;
 height:120px;
 background:#ccc 0 url('imagens/') no-repeat;
 position:relative;
 left:-450px;
 top:-1760px;
 /*top:-1760px;*/
 text-align:center;
 }

#coluna_direita {
 width:200px;
 _width:200px;
 padding:5px;
 margin:0;
 border:3px;
 top:-1008px;
 position:relative;
 right:-815px;
 height:744px;
 background:#ccc 0 url('imagens/') no-repeat;
 }

#coluna_esquerda {
 width:200px;
 _width:200px;
 padding:5px;
 margin:0;
 border:3px;
 top:-1759px;
 position:relative;
 left:-448px;
 height:742px;
 background:#ccc 0 url('imagens/') no-repeat;
 }

#conteudo_mostrar {
 width:1020px;
 height:645px;
 overflow:auto;

 }

#homepage {
 color:blue;
 text-align:center;
 /*font:Courier;*/
 font-size:24px;
 }

body {padding:1em}

#menu {
	width:500px;
	margin:1em auto;
	}
	body {font:86%/1.4 Verdana,sans-serif;}
	/* Disable properties specified in the imported CSS file */
	.menu a {
 border:none;
 font-weight:bold;
	}

/ Actual menu CSS starts here /

	.menu,
	.menu ul {
 margin:0;
 padding:0;
 list-style:none;
	}
	.menu {width:200px;}
	.menu li {
 display:block;
 margin:0;
 padding:0;
 margin-bottom:1px;
	}
	.menu a {
 display:block;
 padding:2px 5px;
 color:black;
 background:#b0c23d;
 text-decoration:none;
	}
	.menu a:hover,
	.menu a:focus,
	.menu a:active {background:#d9dcb0;}
	.menu ul li {padding-left:15px;}
	.menu ul a {background:#ced174;}
	.hidden {display:none;}

Alguma sugestão ?

Att,

Rodrigo Faria