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 ?
Resolvi usando float/margin ... deu uma dorzinha de cabeça para acertar tudo ... só o grupocentral que ficou desalinhado ... mas vou tentar resolver ... se não conseguir peço um help ...
Obrigado a todos ...
