Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá, amigos.
Preciso criar um layout em padrão W3C XHTML+CSS em que terei três linhas, topo, meio e rodapé. Topo e rodapé terão tamanho fixo.
A linha do meio deverá ser dividida em três colunas: a coluna esquerda e a direita, com largura fixa e altura variável, de acordo com a resolução do monitor do visitante de forma a preencher todo o espaço disponível na tela, e a central com tamanho variável de acordo com a resolução do monitor do visitante, também preenchendo o espaço da tela.
Estou tendo problemas para fazer as colunas esquerda, direita e central mudarem o tamanho automaticamente. Tentei usar width=auto, width=100% mas não funciona.
Espero que alguém possa me dar essa mãozinha...
O código de tudo o que consegui fazer está abaixo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">* { margin:0px; padding:0px; }
.limpar { clear:both; }
#topo { display:block; float:left; width:100%; height:150px; background:#CCC; }
#meio { display:block; float:left; width:100%; height:200px; background:#CCFF66; }
#rodape { display:block; float:left; width:100%; height:150px; background:#CCC; }
#esquerda { display:block; float:left; width:150px; height:auto; background:#999966; }
#direita { display:block; float:right; width:150px; height:auto; background:#FF9900; }
#centro { display:block; width:auto; background:#fff; }
</style>
</head>
<body>
<div id="topo">topo</div>
<div id="meio">
<div id="esquerda">esquerda</div>
<div id="centro">centro</div>
<div id="direita">direita</div>
</div>
<div id="rodape">rodapé</div>
</body>
</html>Carregando comentários...