CSS Framework - Colunas em Porcentagem

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