Problema com div > 100%

Olá a todos, estou com um pequeno problema, gostaria de uma ajuda.

Eu estou com uma página, que tem uma grande quantidade de colunas, o que acaba excedendo o tamanho da tela, e aparecendo a barra horizontal, até ai, sem problema.

O problema é as divs não se ajustam conforme os dados dentro da mesma, elas ficam fixas.

Segue o screenshot.

/applications/core/interface/imageproxy/imageproxy.php?img=http://img.photobucket.com/albums/v433/ericopfusco/css.jpg&key=6cf47a559f63f6125d7aba70a51ed1e7bcaa0776936a245dc453985762948b1e" alt="Imagem Postada" />

Segue o corpo da página e o css, caso haja algum erro no css por favor, me corrijam, eu ainda estou engatinhando no css.

XHTML:

<div id="pag"> <div id="cabecalho"> <div id="logotipo"><a href="./"><img src="./template/images/logotipo.gif" alt="" /></a></div> <div id="dir"><img src="./images/quads.gif" alt="" /></div> </div> <div class="vazio"></div> <div id="tela">Aqui onde as informações aparecem, e as informações excedem a tela. </div> <div id="rodape1">Painel de Controle</div> <div id="rodape2">Desenvolvido</div></div>CSS:

* { margin: 0; padding: 0; }body { font-family: Verdana, Helvetica, Arial, sans-serif; color: #000000; background-color: #DDD; font-size: 11px; margin: 0; padding: 4px;}#pag { border: 1px solid #000000;}#cabecalho { background-color: #CF161E; border-bottom: 1px solid #000000; height: 85px; width: 100%;}#logotipo { padding-left: 2px; background-color: #CF161E; float: left;#dir { background-color: #CF161E; float: right; white-space: nowrap;}#tela { background-color: #FFFFFF; border-top: 1px solid #000000; padding: 10px 5px 10px 5px; min-height: 463px; height:auto !important;}#rodape1 { float: left; text-align: left; padding: 3px; background-color: #CF161E; color: #FFFFFF; font-size: 10px; border-top: 1px solid #000000;}#rodape2 { text-align: right; color: #FFFFFF; font-size: 10px; padding: 3px; background-color: #CF161E; border-top: 1px solid #000000;}