Antes de mais nada – já é até automatico para mim – iremos zerar todos os elementos possíveis do html para que possamos obter o mínimo de diferença entre os diversos browsers existentes.
Para os que ainda não sabem para que serve, ou nunca ouviu falar sobre CSS Reset, vale a pena ler o post sobre CSS Reset, ou, ler o post da amiga Cléo Morgause.
Então vamos ao que interessa:
* {margin:0;padding:0} /* CSS Reset */Próximo passo é criarmos as nossas div’s na seguinte ordem: esquerda / direita / centro.
<div id="ctWrapper">
<div id="div01"></div>
<div id="div03"></div>
<div id="div02"></div>
</div>Mas Gustavo, porque a #div03 antes da #div02?
Simples! Porque, se colocarmos a #div03 por último, a #div02 não irá deixar que a #div03 suba para ocupar o seu devido lugar. É só mudarmos a ordem da div para vermos o resultado.
Agora, vamos ao CSS:
#ctWrapper {width:400px;padding:10px;margin:10px auto;background:#eee}
#div01, #div02, #div03 {height:200px}
#div01 {float:left;width:90px;background:#600}
#div02 {margin:0 100px;background:#060}
#div03 {float:right;width:90px;background:#006}Hmm… Mas a #div02 não deveria ter a declaração de tamanho em porcentagem (%)?
Não! Como as duas DIVs laterais são flutuantes (float) e informamos que a nossa #div02 terá sua margem esquerda e margem direita de 100px, logo ela ocupará todo o espaço livre ao centro.
O resultado esperado deverá ser igual a imagem abaixo.
Pronto! Temos um layout em 3 colunas dentro dos padrões. Dúvidas e/ou dicas nos comentários ou pelo email: contato[a]gustavoribeiro.net
Cara.. 10 o tutorial. Bicho, penei para fazer isso e ficou muito zoneado. Esse seu código é perfeito! Abraço Lula