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; } /* IE6 */

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 o 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%; } /* only IE6 */
* html .col  { overflow: visible; float: left;}  /* only IE6 */

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%; } /* only IE6 */
* html .col  { overflow: visible; float: left;}  /* only IE6 */
/* Framework End */ 

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