Layout de 3 Colunas, por Maurivan Luiz Padilha

Bom dia colegas blogueiros de cada dia!.
Resolvi me tomar na liberdade e postar aqui um artigo que redigi para o portal Plugmasters.

Bom pessoal.
Este é o primeiro artigo que escrevo para a Plugmasters, e vou explicar para vocês como proceder para criar um layout de 3 colunas em tableless/css.

Muitos me perguntam se isto de fato é complicado, mas a resposta de fato, é outra, tudo é simples quando se tem vontade de aprender.

Bom, mas chega de “blábláblá” e vamos a que interessa.

Para se desenvolver um layout simples de 3 colunas sem ser layout fluido, é simples, será utilizado basicamente float, margin e width.

Para começar irei citar como que de estar setado a estrutura do HTML:

Para simplificar, irei adicionar os “codes” abaixo, e irei comentando sobre o que cada um representa.

Código CSS:

- Com a propriedade width nós adicionaremos o tamanho que será delimitado o nosso layout.

#geral {
width:780px;
}

Também com a propriedade width, iremos setar um tamanho fixo para as colunas da direita, e da esquerda.

#cdireita, #cesquerda {
width:165px;
}

Agora iremos definir as propriedades float, nas colunas.

Com o float left, a div irá fluir para o lado esquerdo do layout.
#cesquerda {
float:left;
}

Já com o float right, a div irá fluir para o lado direito do layout.
#cesquerda {
float:right;
}

E iremos setar também a da DIV central (a div que será inserido os textos), e também iremos definir uma pequena margin no canto esquerdo, para que o a div #centro, não seja inserida “em cima” da div #cesquerda.
#centro {
width:380px;
margin-left:170px;
}

Vale ressaltar de que este exemplo acima citado, trata-se de uma estrutura básica de um layout de 3 colunas (não esperem que gere um layout “ultrapower” sozinho).

Segue abaixo o resumo de como ficaria o nosso style.css.

Bom, por hoje é só pessoal!..

Qualquer dúvida que vocês tenha, pode ser enviado para maurivan@maurivan.com, terei enorme prazer em colaborar =}

Abraços, até a proxima!.

Robson Perez <robsonp21@bol.com.br>

Interessante este artigo, posso dar um pitaco? Maurivan em seu próximo Artigo, experimente pegar e fazer um modelo de 3 colunas com layout fluido, seria interessante, mas enfim, muitoooo bom o artigo, parabéns.

Camila Capone <camilacapone1@hotmail.com>

Nao existe pessoa mais apaixonada pelo que faz do que ele. É de uma dedicação de dar inveja a qualquer um. Sou fã das idéias e ideais desse moço. Parabens pelo artigo! =

Marcos <marcos1234@gmail.com>

Muito ruim, existem varias materias sobre isso nos portais de web e essa materia nem aborda tudo que tem que abordar.. muito ruim.

Raphael Borsato Novelini Vulgo "Maurivans Fan <rbnovelini@gmail.com>

Tudo de bom esse artigo,
gostei muito!

Maurivan The DEsigner Man.

meu idolo ;

Maurivan Luiz <maurivan@maurivan.com>

Marcos, por isto eu tentei deixar claro, com este pequeno artigo, você não conseguirá montar "layouts ultrapower", é só para ter "noção" de como tratar Tableless/CSS, é algo bem básico para quem está começando, e se quiser algo que aborde tudo, compre um livro, não leia artigos.

Andre Zacarias <dede_zbm@hotmail.com>

Muito boa a explicação e estou interessado no que o robson disse de fazer um modelo de 3 colunas com layout fluido quero ver como q é to esperando a próxima matéria flw....

Henrique Serrat <ge3535@ge3535.com>

Bom de mais. É dificil encontrar artigos ensinando coisas basicas na net...
Discordo do Marcos, nunca achei algo simples e objetivo, para quem ta iniciando da pra entender cada codigo cada linhazinha oq faz...
Muito bom Maurivan!

Jonas Silva <weberpg@gmail.com>

Legal, mas da próxima vez diga de onde vei o artigo... tableless

Lucas <lucasrenod@gmail.com>

Sinceramente não gostei.