Este artigo explica como construir um layout de 3 colunas em CSS. As instruções se aplicam a CSS3 e anteriores.

Desenhe Seu Layout

Você pode desenhar seu layout no papel ou em um programa gráfico. Se você já tem uma estrutura de arame ou um design ainda mais extenso em mente, simplifique para as caixas básicas que compõem o site. O design que acompanha este artigo possui três colunas na área de conteúdo principal, além de cabeçalho e rodapé. Se você olhar com atenção, verá que as três colunas não são iguais em largura.

Depois de desenhar o layout, você pode começar a pensar nas dimensões. Este projeto de exemplo terá as seguintes dimensões básicas:

• Não mais do que 900 pixels de largura
• Calha de 20 px à esquerda
• 10 px entre colunas e linhas
instagram viewer
• Colunas com 250, 300 e 300 pixels de largura
• A linha superior tem 150 px de altura
• A linha inferior tem 100 px de altura

Escreva HTML / CSS básico e crie um elemento de contêiner

Uma vez que esta página será um válido HTML documento, comece com um recipiente HTML vazio.

Adicione os estilos CSS básicos para zera as margens, bordas e preenchimentos da página. Enquanto houver outros estilos CSS padrão para novos documentos, esses estilos são o mínimo necessário para obter um layout limpo. Adicione-os ao cabeçalho do seu documento.

Para começar a construir o layout, coloque um elemento de contêiner. Às vezes acontece que você pode se livrar do contêiner mais tarde, mas para a maioria dos layouts de largura fixa, ter o elemento do contêiner torna mais fácil de gerenciar em diferentes Web navegadores.

Estilize o recipiente

O contêiner define a largura do conteúdo da página da web, bem como as margens externas e o preenchimento interno. Para este documento, o contêiner tem 870 pixels de largura e uma calha de 20 pixels à esquerda. A medianiz é configurada com um estilo de margem, mas o preenchimento do contêiner é zerado para evitar que quaisquer elementos sejam tão largos quanto o contêiner.

Se você salvar o documento agora, será difícil ver o contêiner porque ele não contém nada. Se você adicionar um texto de espaço reservado, poderá ver o elemento do contêiner com mais clareza.

Use uma tag de título para o cabeçalho

Como você decide estilizar a linha do cabeçalho depende muito do que está nela. Se a linha de cabeçalho tiver apenas um gráfico de logotipo e título, use uma tag de título (

) faz mais sentido do que usar um

. Você pode estilizar o título da mesma forma que estiliza um div, evitando tags estranhas.

O HTML da linha do cabeçalho fica na parte superior do contêiner e tem a seguinte aparência:

Em seguida, para definir os estilos nele, uma borda vermelha foi adicionada na parte inferior para que você pudesse ver onde termina, as margens e o preenchimento foram zerados, a largura definida para 100% e a altura para 150px.

Não se esqueça de colocar este elemento em float: left; propriedade. A chave para escrever layouts CSS é flutuar tudo, até mesmo coisas que têm a mesma largura do contêiner. Dessa forma, você sempre sabe onde os elementos ficarão na página.

UMA Seletor descendente de CSS estilos aplicados apenas a elementos H1 que estão dentro do elemento #container.

Para obter três colunas, comece construindo duas colunas

Ao construir um layout de três colunas com CSS, você precisa dividir seu layout em grupos de dois. Portanto, para este layout de três colunas, as colunas do meio e da direita são agrupadas e colocadas ao lado da coluna da esquerda em um layout de duas colunas onde a coluna da esquerda tem 250 px de largura e a coluna da direita tem 610 px de largura (300 cada para as duas colunas, mais 10 px para a sarjeta entre eles).

A coluna da esquerda flutua para a esquerda, enquanto a outra flutua para a direita. Como a largura total de ambas as colunas é de 860 px, há uma medianiz de 10 px entre elas.

Adicionar duas colunas dentro da segunda coluna larga

Para criar as três colunas, adicione dois divs dentro da segunda coluna mais larga, assim como você adicionou 2 divs dentro da coluna do contêiner na última etapa.

Como essas duas caixas de 300 px estão dentro de uma caixa de 610 px, haverá novamente uma calha de 10 px entre elas.

Adicionar no rodapé

Agora que o resto da página está estilizado, você pode adicionar o rodapé. Use um último div com um id de "rodapé" e adicione conteúdo para que você possa vê-lo. Você também pode adicionar uma borda na parte superior para saber onde começa.

Adicione seus estilos e conteúdos pessoais

Agora que o layout foi concluído, você pode começar a adicionar seus próprios estilos e conteúdos pessoais. Lembre-se de que as bordas do cabeçalho e rodapé foram adicionadas para mostrar as seções de layout, não especificamente para design.