Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Como ainda estou engatinhando no CSS gostaria de orientações de como fazer a estrutura abaixo utilizar 100 % da janela do navegador.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="estilo.css" rel="stylesheet" type="text/css">
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="site">
<div id="topo"><? include "topo.php" ?></div>
<div id="barra"></div>
<div id="conteudo1">
<div class="banner"></div>
<div class="menu"><? include "menu.php" ?></div>
</div>
<div id="conteudo">
<div class="contesq">
<div class="linha01"><? include "linha01.php" ?></div>
<div class="linha02"><img src="img/bannerexemplo.gif" width="468" height="60"></div>
<div class="linha03"><? include "linha03.php" ?></div>
</div>
<div class="contdir"><? include "colunistas.php" ?></div>
</div>
<div id="rodape"><? include "menu2.php" ?></div>
</div>
</body>
</html>Como podem ver eu tenho vários conteúdos dinâmicos no site. Gostaria que a div contesq que inclui as linhas 01, 02 e 03 ocupassem 100 % do espaço "que sobra" na janela do navegador, já que a div contdir terá um tamanho fixo.
Abaixo, parte do meu CSS
body { font-size: 12px; font-family: "Arial"; text-align: center; background-image:url(img/fundo.jpg); top left repeat-x: fixed; margin:0 0 5px 0; padding:0; height: auto; } a { color: black; text-decoration: none }a:hover { color: #003366; text-decoration: none } #site {width: 780px;height: auto;margin:0 auto; text-align:left; / "remédio" para o hack do IE / } #topo { background: url(img/topo.jpg); text-align: left; height: 61px; width: 780px; }#barra { background-color: #FADF27; text-align: left; width: 780px; height: 10px; }#conteudo1 { background-color:; text-align: justify; width: 780px; height: 124px; }.banner { background: url(img/fundobanner.jpg); text-align: left; width: 606px; height: 124px; float: left; }.menu { text-align: left; width: 174px; height: 124px; float: left; }#conteudo { text-align: justify; width: 780px; height:100%; }.contesq { text-align: left; width: 606px; position:relative; float: left }.linha01 { font-size: 08px; text-align: justify; width: 600px; _width: 606px; height: auto; padding: 10px 10px 10px 10px; _padding: 10px 0px 10px 10px; position:relative; float: left }.linha02 { text-align: center; width: 600px; _width: 606px; height: 60px; padding: 10px 10px 10px 10px; _padding: 10px 0px 10px 10px; position:relative; float: left }.linha03 { text-align: center; width: 600px; _width: 606px; height: auto; padding: 10px 10px 10px 10px; _padding: 10px 0px 10px 10px; position:relative; float: left } .contdir { text-align: right; width: 174px; height:100%; position:relative; float: left; }#rodape { font-size: 11px; font-family: "Arial"; text-align: center; background: url(img/rodape.jpg); height: 60px; width: 780px; float: left; }
Alguém pode me orientar como devo alterar meu CSS ?
Carregando comentários...