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