Montando Sites com CSS - Parte III - Conteúdo

Postado em June 8th, 2007 | Algo sobre CSS, Tutoriais

Olá Cssmaníacos
Até agora já fizemos a estrutura e o menu do nosso site. Hoje daremos continuidade ao nosso site, acrescentando espaço para o conteúdo. Serão 3 colunas, uma esquerda, uma direita e uma central.
Aconselho a todos que antes de começar, veja o tutorial 1 e o tutorial 2 onde começamos a estrutura do nosso site.
O nosso código entrará no seguinte trecho: <div id=”conteudo”<h1>Conteudo</h1></div>
XHTML

<div id= “conteudo”>
<div id=”col_esquerda” >
<h2>Esquerda</h2>
</div>
<div id=”col_central” >
<h2>Central</h2>
</div>
<div id=”col_direita” >
<h2>Direita</h2>
</div>
</div>

e Agora a formatação
CSS
Basta adicionar isso abaixo do código css já existente .

#col_esquerda{
width:133px;/*Largura da div*/
height:300px;/*Altura da div*/
border-right:dashed 1px #f00;/* Borda tracejada*/
float:left;/*Faz a div flutuar à esquerda*/
padding: 0 10px;/*Acrescenta uma distancia entre a div e o conteudo dela*/
}#col_direita{
width:133px;
height:300px;
float:right;/* Faz a div flutuar à direita*/
padding: 0 10px;/*Acrescenta uma distancia entre a div e o conteudo dela*/
border-left:dashed 1px #f00;
}

#col_central{
float:left;
padding:0 10px;
width:442px;
}

Com esse código acima, temos as 3 colunas posicionadas, com as bordas para delimitar a separação delas.
Veja aqui o resultado final já com um conteúdo.
Até a próxima e bom estudo

Rodrigo Medeiros

Posts Relacionados

2 Comentários para “Montando Sites com CSS - Parte III - Conteúdo”

  1. Mayeni Almeida disse:
    June 22nd, 2007 at 20:10

    Rodrigo… não canso de falar que vc é “O CARA” da Web. Não apenas pelo fato de vc saber muito, mas pela sua simplicidade de multiplicar seus conhecimentos.
    Seu blog está ótimo!
    Parabéns! E muito sucessssssoooooooo!
    De sua amiga (ex-loira kkkkk), May.

  2. Jeferson disse:
    November 25th, 2007 at 16:09

    Aew Rodrigo, parabéns pelo seu Blog! Os tutoriais são ótimos e estão bem explicados. As dicas me ajudaram a sanar várias dúvidas, principalmente sobre Float. Aproveito desde já para agradecer e parabéns mais uma vez, ótimo Blog.

Solte o Verbo