Posicionamento DIV - absolute

Bom Dia

Estou desenvolvendo um projeto para clinica de fisioterapia e estou procurando não utilizar tabelas no layout, porem ao tentar usar flooter nas DIVs acabei me atrapalhando e como tinha pressa para apresentar ao cliente usei position: absolute - ai eu me ferrei - porque largura são fixas em % porem o comprimento (hight) é flexível, então o que acontece quando uma DIV tem um conteudo maior fica por baixo da outra.

vejam o layout aqui

o código css dos boxes:

/ Boxes /

#tudo {
width: 100%;
height:auto;
margin-top:1%;
margin-bottom: 1%;
}

#grupotopo {
position: absolute;
width: 100%;
height:200px;

/ Para Mozilla/Gecko (Firefox etc) / background: -moz-linear-gradient(top, #FFF,#fff,#fff,#DDE9B9)/ repeat-X/; / Para WebKit (Safari, Google Chrome etc) / background: -webkit-gradient(linear, 0% 74%, 0% 100%, from(#FFFFFF), to(#DDE9B9)); filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,

StartColorStr='#00FFFFFF', EndColorStr='#50DDE9B9');
background-image: -o-linear-gradient(top,RGB(255, 255, 255),RGB(255, 255, 255),RGB(237,

248, 209));
}

#logo {
position: absolute;
background-image:url(../imgs/logo.gif);
background-repeat: no-repeat;
top: 2%;
width:20%;
height:180px;
margin-left:10%;
}

#player {
position:absolute;
top:2%;
left: 78%;
width:200px;
height:20px;
}

#login {
position:absolute;
top:36%;
left:62%;
width:400px;
height:20px;
color:#090;
}

#menu {
position:absolute;
top:61%;
left:29%;
width:auto;
height:auto;
}

#grupobanner {
position: absolute;
top: 32%;
width:100%;
height:300px;

/ Para Mozilla/Gecko (Firefox etc) /

background: -moz-linear-gradient(top, #DDE9B9,#fff) repeat-X;
background: -webkit-gradient(linear, 0% 0%, 0% 50%, from(#DDE9B9), to(#FFFFFF));

filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,

StartColorStr='#50DDE9B9', EndColorStr='#00FFFFFF');
background-image: -o-linear-gradient(RGB(237, 248, 209),RGB(255, 255, 255));
background-color:#FFF;
}

#banner {
width: 98%;
height: 290px;
margin-top:20px;
margin-left:auto;
margin-right:auto;
background-image:url(../imgs/fundo_banner.png);
background-repeat:no-repeat;
background-position: center;
}

#grupocentral {
clear:both;
position:absolute;
top: 81%;
width:100%;
height:500px;
}

#grupoesquerdo {
position:absolute;
top: 1%;
left:4%;
width:25%;
height:auto;
}

#grupocentro {
position:absolute;
top:1%;
left: 32%;
width:35%;
height:auto;
}
#grupodireito {
position:absolute;
top:1%;
left: 70%;
right:3%;
width:25%;
height:auto;
}

#esquerdocabecalho {
height: 100%;
background-image:url(../imgs/corpo.gif);
background-repeat:no-repeat;
display:table-cell;
line-height:30px;
font-family:Cambria, Tahoma, "Trebuchet MS";
font-size:24px;
padding-left:30px;
color:#090;
font-weight: bolder;
text-transform: none;
font-variant: small-caps;
vertical-align:middle;
}

#esquerdoconteudo {
margin-top:5%;
padding-top:10px;
padding-left:5px;
padding-right:5px;
width:100%;
height:auto;
text-align:center;
margin-bottom: 5%;
background: #DDE9B9;

/ Para Mozilla/Gecko (Firefox etc) /

background: -moz-linear-gradient(top, #DDE9B9,#fff,#fff,#fff) repeat-X;
background: -webkit-gradient(linear, 0% 0%, 0% 40%, from(#DDE9B9), to(#FFFFFF));

/*filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,

StartColorStr='#50DDE9B9', EndColorStr='#00FFFFFF');*/
background-image: -o-linear-gradient(RGB(237, 248, 209),RGB(255, 255, 255),RGB(255, 255,

255));

-pie-background: linear-gradient(#DDE9B9,#FFFFFF, #FFFFFF);
behavior: url(htc/PIE.htc);
}

#rodape {
position: absolute;
top: 185%;
left:2%;
width:96%;
display:table-cell;
line-height:30px;
vertical-align:middle;
text-align:center;
font-variant:normal;
font-weight: bold;
}

Qual a melhor solução ?