CSS Framework - Colunas em Porcentagem

Por Vinicius Braga 13 de June 2007

Neste artigo iremos tratar do método de criação de colunas flexíveis com Folha de Estilo (CSS), capaz de funcionar em qualquer browser (Cross-Browser) com W3C Web Standards e Internet Explorer 6+.

No caso de querer pular direto para um exemplo funcional, veja: http://viniciusbraga.com/demo/colunas-porcentagem.html

Propriedades da linha delimitadora de colunas

Em uma estrutura básica com colunas, é necessário ter um elemento capaz de delimitar a área na qual as colunas irão se posicionar dividindo o conteúdo.

O elemento possui duas características:

1. Um comportamento de bloco delimitador do conteúdo externo; 2. E ser capaz de organizar as colunas no seu limite, sem deixá-las sair.

Esta estrutura será uma classe que chamaremos de row (linha em inglês).

.row { margin: 0; padding: 0; overflow: hidden; }
* html .row { height: 100%; overflow: visible; }

Esta classe para ser repetidamente utilizada, precisa ser simples e fundamental. Ela deve evitar propriedades capazes de atrapalhar a sua função de delimitar e ser neutra. Segue a explicação da razão de cada propriedade da regra:

Sobre as margens:

margin: 0; padding: 0;

Nós aplicamos nas margens externas (margin) e nas internas (padding) o valor zero, garantindo a ausência de margens na largura total da linha.

Sobre a propriedade:

overflow: hidden;

Para definirmos o limite e comportamento do conteúdo dentro da classe row, iremos usar a propriedade overflow para disciplinar o conteúdo. Como não estou definindo uma altura com um unidade fixa (pixel, milímetro, pontos, etc...), a altura da classe row se ajustará ao tamanho do maior conteúdo da linha.

Altura para o Internet Explorer:

height: 100%;

O Internet Explorer não respeita os limites impostos pela propriedade overflow sem uma definição na propriedade de altura. Então definimos: @height: 100%;@

Esta propriedade, para o Internet Explorer 6 (IE6), funciona bem e não apresenta problemas nos outros browsers, mas sempre observe as atualizações do Internet Explorer. Veja mais sobre a compatibilidade do CSS no Internet Explorer 7 .

É comum, nas atualizações da Microsoft, as propriedades do CSS modificarem o seu comportamento. Esse tipo de problema pode ser facilmente resolvido usando o CSS Browser Selector de Rafael Lima, já mundialmente reconhecido.

Propriedades e formatação das colunas

Com o mesmo espírito de simplicidade de criação da classe row, iremos produzir as regras para as nossas colunas. Basicamente, existirão dois modelos de colunas.

1. Coluna com tamanho em porcentagem; e 2. Coluna coringa.

Coluna com tamanho em porcentagem

Iremos acrescentar duas regras especificando uma classe. Um coluna com 50% de largura segue descrita no CSS como:

.col50 { width:50%; }
.col50 { margin: 0; padding: 0; float: left; }

A especificação das colunas com porcentagem em duas regras, com visto acima, facilita e otimiza o código CSS, evitando a repetição das propriedades comuns às classes das colunas.

Esse padrão de código se repete nos valores que você necessita para o seu layout. Para criarmos uma coluna de 25% neste sistema, basta acrescentar:

.col25 { width:25%; }
.col50 { width:50%; }
.col25, .col50 { margin: 0; padding: 0; float: left; }

Coluna coringa

A coluna coringa não tem especificação de largura, ocupando qualquer espaço restante não ocupado pelas outras colunas na linha.

O nome desta classe é apenas col. O seu comportamento é semelhante da classe row, já explicada neste artigo. Logo podemos, simplesmente, acrescentar o nome da classe junto com a regra semelhante já existente:

.col, .row { margin: 0; padding: 0; overflow: hidden; }
* html .row  { overflow: visible; height: 100%; }
* html .col  { overflow: visible; float: left; }

Código final

Usando este padrão de criação de colunas, você rapidamente pode montar um layout, funcionando em todos os browsers que atendem as especificações do W3C.

/*  
 * Cross-Browser CSS Flexible Columns Framework
 * Author: Vinicius Braga
 * Author URI: http://viniciusbraga.com/css-cross-browser-framework/
 */
.col25 { width:25%; }
.col30 { width:30%; }
.col50 { width:50%; }
.col60 { width:60%; }
.col25, .col30, .col50, .col60 { margin: 0; padding: 0; float: left; }
.col, .row { margin: 0; padding: 0; overflow: hidden; }
 * html .row  { overflow: visible; height: 100%; }
 * html .col  { overflow: visible; float: left; }

Outras informações úteis, veja : http://viniciusbraga.com/demo/

Comente e compartilhe sua ideia