Templates com Layout de 3 colunas

Vimos no artigo anterior como fazer um layout de 2 colunas de forma fácil e simples. Agora vamos fazer um Templates de 3 colunas usando o código anterior.
Você precisará adicionar apenas dois elementos dentro da div conteudo.

<div id="conteudo">
<div id="conteudo_principal">
.....
</div>
<div id="segundo_menu">
.....
</div>
</div>

A CSS fica assim agora:

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

#conteudo_principal {
width: 320px;
float: left;
}

#segundo_menu {
width: 180px;
float: right;
}

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

#rodapé {
clear: both;
}

O que fizemos foi:
Pegamos o layout de 2 colunas e dividimos o elemento DIV conteudo em duas partes, DIV conteudo principal e DIV segundo_menu. Com isso o conteúdo principal do site ficou em primeiro lugar no fluxo do documento XHTML e os buscadores indexarão melhor seu site.
Existem outras forma de se fazer isso usando margens negativas, mas este assunto será abordado em artigo futuro.

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