Layout de duas colunas com CSS

Dizem que o Cálice Sagrado em Cascading Style Sheet é o layout de três colunas fluídas (ou flutuantes, ou ainda, elástico). Mas antes de mostrá-lo, e aliás, ele é relativamente fácil, começarei explicando o layout de duas colunas. Ambos compartilham o mesmo príncipio, então duas colunas com CSS bastarão por enquanto.

Primeiro, comece com as duas caixas:

[html]

[/html]

Para identificá-los com mais facilidade, vamos dar cores ao código:

[css]#menu {
border:2px solid red;
}

#conteudo {
border:2px dashed green;
}[/css]

Agora, vamos jogar nossa caixa “menu” para a esquerda. Pense como se ela estivesse “flutuando” no layout, pois é assim que se chama a propriedade:

[css]#menu {
border:2px solid red;
float:left;
}

#conteudo {
border:2px dashed green;
}[/css]

É sério, é só isso 🙂 Basta colocar o float;left; para “alinhar” a caixa à esquerda.

Com esses atributos CSS, as caixas mudarão de tamanho conforme o conteúdo delas, ao menos nas versão 1.5 do Firefox, 8.5 do Opera e 6 do Internet Explorer. Em versões antigas, principalmente a quinta do IE, o comportamento é outro, muitas vezes você deve especificar uma largura, qualquer largura, para as caixas alinharem-se uma do lado da outra.

Do jeito que está aqui, nas versões mais recentes desses navegadores, você terá uma caixa “menu” menor, do tamanho do texto contido. Apenas especifique um width caso você não deseje que isso aconteça. Se você for usar porcentagens no width, é de bom costume sempre deixar 1% de sobra, ou seja, o “menu” pode ficar com width:20%; e o conteúdo com width:79%;.

Isso porque certos navegadores (*ahem*, IE…) poderão criar uma barra horizontal de navegação ou ainda simplesmente colocar uma caixa debaixo da outra ao invés de lado a lado.