Templates com Layout de 2 colunas sem complicações

Layouts de 2 colunas são fáceis e simples de se fazer. Mas, uma coisa que todos deve prestar atenção ao fazer layouts em CSS, é no conteúdo principal. O conteúdo principal deve estar sempre em primeiro lugar no fluxo do documento XHTML.
Fazendo isso, o Google sempre encontrará seu conteúdo principal e não seus menus em primeiro lugar.
A partir de um layout de 2 colunas será possível criar um de 3 colunas apenas mudando poucas coisa no código. Vamos então por a mão na massa:
Você vai precisar deste código XHTML:

<div id="moldura">
<div id="conteudo">
.....
</div>
<div id="navmenu">
.....
</div>
<div id="rodape">
.....
</div>
</div>

Veja que o conteúdo principal vem primeiro no documento, depois o menu e no final o rodapé.

A CSS para o layout vem a seguir:

#conteudo {
width: 520px;
float: right;
}

#navmenu {
width: 180px;
float: left;
}

#rodapé {
clear: both;
}

Veja como ficará na figura acima.
Lembre-se das dimensões dos elementos para não forçar a moldura.
Para se criar um template de 3 colunas usaremos este mesmo código e verá que criação de templates de 3 colunas são simples, mas isso fica para o próximo artigo.

Subscreva o CSS-Desvandado completo!
Subscreva CSS - Desvendado por Email