Css não faz ajustes em % corretamente

Pessoal.

Passei a noite inteira ( como podem ver são quase 5 da manhã ) me batendo tentando aprender css , pegando codigos de css dos sites, mas nada resolveu meu problema.

Criei um site com aquela estrutura básica de cabecalho, tres colunas ( menu , conteudo , menu ) e rodapé.

O problema que ocorre é o seguinte.

O div conteudo está sem definição de largura, estou utilizando apenas as margens do tamanho dos divs MENU para que ele fique redimensionável.

Ate ai ok,

o problema é que não sei porque motivo, diminuindo mais que uns 70% da janela o div do meio para em baixo dos dois menus.

Eu queria que ele fizesse igual quando eu montava com tabelas. Se o do meio der uma "engordadinha" empurra os demais para fora. Mas não consigo fazer isso.

Peço encarecidamente a ajuda dos amigos do fórum para resolve este problema.

Alterei todo meu layou e agora não tem volta.

Segue Css e Htm da pagina.

*****************************************************************************

<div id="Cabecalho">Cortei os codigos do cabecalho para não atrapalhar</div><div id="MenuSuperior">Aqui tem codigos de banco para montagem do menu , mas não interfere em nada, ja testei.</div><div id="container"> <div id="ColunaEsquerda">Aqui exibo meu menu lateral </div> <div id="ColunaDireita">Itens do menu da direita </div> / o problema acontece aqui. Utilizei esta table com width 99% pois os codigos que vem dentro do ContentPlaceHolderse perdem se não tiverem uma tabela como base. Mas mesmo tirando a tabela e digitando um texto, quando apertar a tela ele joga isso para baixo dos dois divs. / <div id="ColunaCentral"> <table id="TabelaConteudo" width="99%" border=1 > <tr> <td> <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </td> </tr> </table> </div><div style="clear:both"/><div id="Rodape" runat="server"> <uc2:Rodape ID="Rodape1" runat="server" /></div></div> ***********************************CSS#Cabecalho { /background-color:#6633FF/} #ColunaEsquerda { float: left; padding: 5px 5px 5px 5px; width: 155px; /background-color:#99CC66/}#ColunaCentral { margin-left: 170px; margin-right: 170px; /background-color:#006666;/}#ColunaDireita { float: right; padding: 5px 5px 5px 5px; width: 155px;/ background-color:#0033CC/ }#Rodape { padding-top: 10px; text-align: center; background-color:#666666; clear: both; position:relative;}