Estou desenvolvendo o meu site sem tabelas, utilizando DIVs, as quais são definidas por um arquivo de folha de estilo CSS.
Eu quero que o site ocupe 100% da tela em qualquer resolução.
O site está definido para ter 3 colunas, conforme segue:
1) direita
2) miolo
3) esquerda
As colunas direita e esquerda tem tamanhos fixos, mas a coluna "miolo" terá conteúdo de informação em testo, imagens e flash.
Eu quero que esta coluna "miolo" redimensione estre as outras duas colunas de acordo com a resolução de tela.
Se alguem souber como fazer, por favor me passe a solução.
Segue abaixo o arquivo "folha de eslilo CSS.
body {
margin:0px;
background-color: #cccccc;
font-family:"Trebuchet MS", Tahoma, Arial, Verdana;
font-size:12px;
color:#000;
}
#todo {
position: relative;
width: 750px;
border: 1px solid black;
margin:0px auto;
background-color: white;
}
#meio {
position: relative;
width: 750px;
min-height: 400px;
background-color: #eeeeee;
}
#rodape {
width: 746px;
height: 75px;
border: 2px solid brown;
}
#esquerda {
float: left;
width: 150px;
min-height: 400px;
border: 2px solid green;
}
#miolo {
float: left;
width: 438px;
min-height: 400px;
border: 2px solid blue;
}
#direita {
float: right;
width: 150px;
min-height: 400px;
border: 2px solid yellow;
}
#menu {
width: 150px;
height: 400px;
}
.itemMenu {
width: 140px;
height: 21px;
background-color: lightyellow;
padding: 3px 0px 0px 10px;
border-bottom: 1px solid black;
}
.secao_miolo {
width: 428px;
height: 150px;
text-align: center;
background-color: #cccccc;
margin: 2px 5px 4px 5px;
}
.secao_direita {
width: 140px;
height: 100px;
text-align: center;
background-color: #cccccc;
margin: 4px 5px 4px 5px;
}
#rodape_direita {
float: right;
width: 200px;
text-align: right;
margin: 5px 10px 0px 0px
}
#rodape_direita a{color: #cc6600; text-decoration: none;}
#rodape_direita a:hover{color: #cc6600; text-decoration: underline;}

Help














