Layout fixo/fluido com CSS alterando 1 linha

Aviso importante!

Eu sei que você não quer ver propagandas, porém o conteúdo gratuito só está aqui graças a publicidade. Considere desativar o AdBlock para esse site.

Neste post trago até vocês um código pronto de layout de site que pode ser transformado em fixo ou fluido mudando apenas uma linha do código CSS. Pra quem não sabe, layout fluido é aquele que tem a largura da janela do navegador, e layout fixo é aquele que tem uma largura fixa.

Vamos ao código então:

Código da página index.htm

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Layout fixo/fluido</title>
<link href="css/estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="geral">
<div id="cabecalho">
<h1>Cabealho da pgina</h1>
</div>
<div id="esquerda">
<h2>Lateral esquerda</h2>
</div>
<div id="direita">
<h2>Lateral diretia</h2>
</div>
<div id="centro">
<h2>Centro da pgina</h2>
</div>
<div></div>
<div id="rodape">
<h3>Rodap da pgina</h3>
<h4><a href="http://www.rbtech.info" target="_blank">Criado por www.rbtech.info</a></h4>
</div>
</div>
</body>
</html>

Código do arquivo estilo.css

*{
 margin:0;
 padding:0;
}
#geral{
 width:960px; /* Excluindo esta linha vc tem um layout fuido */
 margin:0 auto;
}
#cabecalho{
 background:#0099FF;
 padding:10px;
}
#rodape{
 background:#0099FF;
 padding:10px;
 text-align:center;
}
#esquerda{
 width:197px;
 background:#999999;
 padding:3px;
 float:left;
}
#direita{
 width:197px;
 background:#999999;
 padding:3px;
 float:right;
}
#centro{
 background:#FFFF66;
 margin:0 200px; /* a margem colocada aqui deve ser sempre a largura da
coluna da esquerda */
 padding:3px;
}
.clear{clear:both;}

Sobre o autor

Ricardo Bernardi

Sou técnico em hardware e desenvolvedor web, e sobre estes dois assuntos comecei a compartilhar aulas e artigos, tornando-me blogueiro em 2008. Em 2010 esse hobby virou profissão, e desde então tenho buscado melhorar e profissionalizar cada vez mais os projetos que mantenho na web.

Comentários

Atualmente temos 5 comentários para este post. Participe você também, clique aqui e comente sobre o assunto.

  • Julio de Araujo comentou em

    Cara!

    Demais realmente entendi com funciona o Float.

    Obs.: relacionado ao entendimento Float.
    Obrigado..

    Responder
  • Lucca Junior comentou em

    Ricardo,

    Realmente quando não se define a "width" o layout fica fluido, mas o exemplo que você deu, no caso, ficaria muito difícil para trabalhar posteriormente, pois se você acessar de um tablet,por exemplo, um slider, ele não ficaria fluido e desconfiguraria sua página inteira.
    Espero que tenha me entendido !

    Vi que o artigo é de 2010, quando o assunto ainda não era muito falado, então entendo o artigo ! (risos)

    Mas hoje é INCRÍVEL este tipo de "exceção" nas páginas web.

    E parabéns pelo blog !
    EXCELENTE !!!

    Att,

    Lucca

    Responder

Deixe seu comentário