Compactando o seu CSS com PHP

Compactar o arquivo CSS é uma das técnicas utilizadas para acelerar o processo de carregamento de um website. Algumas destas técnicas estão sendo amplamente utilizadas. Hoje, iremos descrever três maneiras diferente de compactar os arquivos CSS e enviar ao navegador do usuário, utilizando para isto o PHP.

O método de Paul Stamatiou

Este método já é utilizado por alguns desenvolvedores web a mais de um ano. Para fazer funcionar, você precisa primeiro renomear o seu arquivo NOME.css para NOME.css.php. (onde NOME é o nome do seu arquivo).

Então faça a modificação no HTML, utilizando o novo nome.

<link rel="stylesheet" type="text/css" media="screen" href="/style.css.php"/>

Após alterar o arquivo HTML, renomeie o css conforme informado, e então abra o arquivo para edição. Insira a seguinte linha de código no ínicio do arquivo:

<?php if(extension_loaded('zlib')){ob_start('ob_gzhandler');} header("Content-type: text/css"); ?>

Então, adicione a próxima linha no final do arquivo. Salve, e feche o arquivo.

<?php if(extension_loaded('zlib')){ob_end_flush();}?>

Fim. Este método é bastante útil e eficiente.
Fonte: http://paulstamatiou.com/2007/03/18/how-to-optimize-your-css-even-more

O método Perishable Press

Este método é bem semelhante ao método descrito por Paul Stamatiou. Basicamente, você também precisa renomear seu arquivo .css para .css.php (ou .php somente), alterar a chamada a este arquivo no html para o novo nome, e então adicionar o seguinte bloco de código no início do seu arquivo CSS:

<?php
   ob_start ("ob_gzhandler");
   header ("content-type: text/css; charset: UTF-8");
   header ("cache-control: must-revalidate");
   $offset = 60 * 60;
   $expire = "expires: " . gmdate ("D, d M Y H:i:s", time() + $offset) . " GMT";
   header ($expire);
?>

Em seguida salve o arquivo e feche-o. Com este método, você não precisa alterar o final do arquivo. Basicamente, esta é a grande diferença sobre o método anterior apresentado.

Fonte: http://perishablepress.com/press/2006/10/23/compressed-css-compression/

O método Reinhold Weber

Este método foi escrito pelo desenvolvedor Alemão Reinhold Weber. Particulamente, prefiro este método aos outros. Explicaremos por que mais abaixo. Por hora, vamos ao método.

Primeiramente, crie um arquivo .php, e insira o código abaixo (e coloque todos os seus CSS de include no código):

<?php
  header('Content-type: text/css');
  ob_start("compress");
  function compress($buffer) {
    /* remove comments */
    $buffer = preg_replace('!/*[^*]**+([^/][^*]**+)*/!', '', $buffer);
    /* remove tabs, spaces, newlines, etc. */
    $buffer = str_replace(array("rn", "r", "n", "t", '  ', '    ', '    '), '', $buffer);
    return $buffer;
  }
  /* your css files */
  include('master.css');
  include('typography.css');
  include('grid.css');
  include('print.css');
  include('handheld.css');
  ob_end_flush();
?>

Por que eu prefiro este método? Simples, com este método não é necessário renomear o arquivo .css para .php. Além do mais, este método comprime todos os arquivos CSS utilizados no site de uma única vez, e envia para o computador do usuário através de uma única requisição, o que acelera muito o processo para sites que tem multiplos css (como o exemplo acima).

fonte: http://reinholdweber.com/?p=37

Menu em abas centralizado sem CSS Hacks

Exemplo de um belo menu em abas, cross-browser e sem CSS Hacks

Muitos webdesigners querem colocar menus centralizados em seu site. Isso é fato. Mas para o principiante em CSS esta não é uma tarefa das mais fáceis. Se você fizer uma busca online você encontrará vários métodos, porém, a grande maioria depende de remendos no CSS, códigos enormes em Javascript ou regras não padronizadas do CSS e que não são suportados por todos os navegadores (display:inline-block; é um exemplo).

Neste artigo vou mostrar um método para conseguir abas centralizadas sem usar nenhum remendo no CSS e que funcionem em todos os navegadores comuns da web. Vamos começar com um exemplo simples para ver como funciona.

Menu básico centralizado

Logo abaixo, você deve estar vendo quatro abas horizontalmente centralizadas. A segunda aba é ajustada como o active. Experimente alterar o tamanho do texto da página para ver como os menus permanecem sempre centrados e clicáveis.

HTML do menu centralizado

O HTML usado para menus centralizados é estruturado semanticamente e muito básico. A estrutura é simplesmente uma lista de links em uma única div.

<div id="centeredmenu">
<ul>
	<li><a href="#">Tab one</a></li>
	<li><a class="active" href="#">Tab two</a></li>
	<li><a href="#">Tab three</a></li>
	<li><a href="#">Tab four</a></li>
</ul>
</div>

CSS do Menu centralizado

A seguir, o CSS usado para centralizar as abas na página. Veja abaixo uma breve explicação de como isso funciona.

#centeredmenu {
   float:left;
   width:100%;
   background:#fff;
   border-bottom:4px solid #000;
   overflow:hidden;
   position:relative;
}
#centeredmenu ul {
   clear:left;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   left:50%;
   text-align:center;
}
#centeredmenu ul li {
   display:block;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   right:50%;
}
#centeredmenu ul li a {
   display:block;
   margin:0 0 0 1px;
   padding:3px 10px;
   background:#ddd;
   color:#000;
   text-decoration:none;
   line-height:1.3em;
}
#centeredmenu ul li a:hover {
   background:#369;
   color:#fff;
}
#centeredmenu ul li a.active,
#centeredmenu ul li a.active:hover {
   color:#fff;
   background:#000;
   font-weight:bold;
}

Como o método de centralização funciona

O truque do método é como os elementos flutuantes são posicionados relativamente dentro uns dos outros. Para explicar isto deixe-me descrever corretamente como um elemento pode mudar suas dimensões quando setamos a propriedade float:left/right.

Div sem a propriedade float

A figura acima mostra uma div (elemento de bloco) que não tem a propriedade float:left/right. Observe como ela estica a 100% da largura do elemento que o comporta, neste caso, a própria página.

Div com a propriedade float:left

Se setarmos a propriedade float da div para left (esquerda), ela encolherá automaticamente e ficará com a largura do conteúdo de dentro dela. Este encolhimento é a chave do processo de centralização, ele nos ajuda a mover nosso menu a medida correta para o centro.

Menu alinhado esquerdo padrão

Vamos usar um menu tradicional alinhado à esquerda e mover as abas para o centro passo a passo. Colori cada elemento com uma cor diferente, assim fica fácil ver como todos ficam aninhados.

Anote por favor o seguinte.

* O DIV ‘centeredmenu’ (caixa azul) tem a propriedade float:left, mas setando uma largura de 100% ela permanece ocupando toda a largura da página.

* O elemento UL (caixa cor-de-rosa) está dentro da DIV ‘centeredmenu’ e tem a propriedade float:left. Isto significa que a UL terá a largura de seu conteúdo.

* Todos os elementos LI (caixas verdes) estão dentro da UL e de cada um tem a propriedade float:left. Isto faz com que eles tenha a largura dos links que estão dentro deles e ficam enfileirados horizontalmente.

* Dentro de cada link (caixa alaranjada) está o título de cada aba; Aba 1, aba 2, etc.

Posicionando a UL

Em seguida vamos posicionar o elemento do UL à direita em 50% usando a propriedade position:relative;. Ao mover um elemento percentualmente para o lado é importante observar que o moverá uma porcentagem do elemento que o comporta e não de sua própria largura. Sendo assim, neste exemplo, o elemento UL será movido para a direita a 50% da largura da DIV ‘centeredmenu’ - isto representa a metade do espaço disponível. O resultado final é nosso menu partindo do meio para ao centro e estourando o espaço disponível, mas não se preocupe com isso, no próximo passo isso será corrigido.

O último passo é deslocar todos os elementos LI de volta à esquerda em 50%. Isto é, a 50% da largura do elemento UL (seu elemento de contenção) e pôr as abas exatamente no centro.

Notas importantes

Este método de centralizar menus é sólido como rocha, mas há algumas coisas que você deve estar ciente.

* Pelo fato de que o elemento UL estoura o espaço demarcado, seu navegador poderá mostrar as barras laterais verticais a menos que você inclua um overflow:hidden; na regra ‘centeredmenu’ no CSS.

* Pelo fato de que o elemento UL não fica alinhado com as abas, você não pode deixá-lo visível. Deixe o elemento UL sem uma cor do fundo e sem borda, assim ele será completamente invisível. Faça toda a estilização de seu menu usando os elementas LI e A (link).

* Se você precisar diferenciar a primeira e a última aba, adicione uma classe ao primeiro e ao último elemento LI, assim eles podem ser estilizados individualmente.

Características principais

É isso aí, aqui estão as características principais dos menus centralizados com CSS puro.

Nenhum CSS Hack

O CSS usado para este menu centraliazdo é 100% válido e livre de hacks. Para superar o erro de box model do Internet Explorer, nenhum espaçamento horizontal (padding) ou as margens (margins) são usados. Em lugar disso, este projeto usa o posicionamento relativo inteligente.

XHTML Strict Válido

O HTML neste exemplo é validado com XHTML 1.0 strict.

Alteração de tamanho de texto

Este menu em abas é inteiramente compatível com a alteração do tamanho de texto nas configurações do navegador. O alteração de tamanho do texto é importante para a acessibilidade da web. Portadores de deficiência visão podem colocar uma fonte de texto maior para facilitar a leitura.

Nenhum Javascript

Javascript não é exigido.

Totalmente Cross-Browser

Este exemplo foi testado nos seguintes navegadores.

* iPhone & iPod Touch

* Safari Mac

* Safari

* Firefox

* Ópera Windows

* Firefox 1.5, & 2; 3

* Safari

* Ópera

* Internet Explorer 5.5, & 6; 7

Como manter o rodapé no final da página

Quando uma página HTML tem um conteúdo muito pequeno, o rodapé pode não chegar ao final da página, ficando no meio do caminho (muitas vezes no meio da página), deixando um espaço vazio até o final. A aparência do site fica horrível nestes casos, principalmente em monitores grandes com altas resoluções. Web Designers frequentemente perguntam em listas de discussões, qual é o caminho para colocar o rodapé fixo no final da página. Esta resposta não é tão obvia, mas nós iremos demostrar uma inteligente e elegante solução.

Quando paramos de usar tabelas e começamos a fazer os layouts usando CSS, tentamos colocar o rodapé no final da página, mas simplesmente não funcionava como esperavamos. Criamos várias maneiras de fazer isto, inumeras vezes usando gambiarras em javascript, outras usando técnicas de css hacks, mas nenhuma destas técnicas foram tão boas e eficientes quanto esta. Este método utiliza CSS 100% valido , e trabalha em qualquer navegador moderno. Também exibe o conteúdo de maneira inteligente em navegadores antigos, o que torna esta a solução segura para usar em qualquer website.

Veja o exemplo online: Veja a demonstração com o rodapé no final da página

Principais recursos

• Trabalha em qualquer navegador moderdo

  Navegadores testados: Firefox (Mac & PC), Safari (Mac & PC), Internet Explorer 7, 6 & 5.5, Opera e Netscape 8

• Compatível com navegadores antigos (gracefull degradation)

  Navegadores antigos irão colocar o rodapé exatamente abaixo do conteúdo. Nós não podemos fazer muito para pessoas que usam navegadores ultrapassados demais, o máximo que conseguimos fazer é possibilitar que consigam acessar o conteúdo.

• O rodapé acompanha o texto em sites com conteúdo longos

  Em sites com bastante conteúdo, o rodapé ficará fora da área imediatamente visível da janela, assim como parte do conteúdo, uma vez que, obviamente, o rodapé estará abaixo deste conteúdo, fechando o site. Este é o comportamento normal e desejado.

• CSS 100% válido. Sem uso de hacks

  O CSS utilizado é 100% válido e não contém hacks.

• Sem JavaScript

  Não é necessário Javascript. Esta técnica usa puramente CSS.

• Compatível com iPhone

  Esta técnica funciona perfeitamente no IPhone e IPod Touch.

• Download Grátis

  Salve o código da nossa página de demonstração e utilize como você desejar.

Existe somente uma limitação

Você deve definir a altura do rodapé para algum valor diferente de auto. Escolha o valor que quiser, só é importante que este valor esteja especificado em pixerls ou ems dentro do seu CSS. Como visto, isto não é uma grande limitação, mas este método é essencial para que o recurso possa trabalhar corretamente.

Se você tem bastante texto no seu rodapé, então é uma boa ideia definir um pouco mais de tamanho para fazer o seu rodapé maior que o texto. Iso é importante pois algumas pessoas usam o texto um pouco maior que o padrão dos navegadores. Outra maneira de resolver este problema, é definir a altura do rodapé em polegadas (em), isto irá garantir que o rodapé cresça juntamente com o texto. Se você somente tem imagens no rodapé, então não é algo que precise se preocupar. Apenas informe o valor para o seu rodapé para um valor definido em pixel, e irá funcionar perfeitamente.

Como funciona?

Não é nada complicado. Vamos separar em duas partes. O HTML e o CSS.

O HTML

<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>

Precisamos de somente quatro divs para este trabalho. A primeira é a div container, que engloba todo o restante. Dentro dela, teremos três divs: o cabeçalho, o body (corpo - conteúdo central do site), e o rodapé. Isto é tudo no HTML. A mágica acontece no CSS.

O CSS

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#cabecalho {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* altura do rodape */
}
#rodape{
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* altura do rodape */
   background:#6cf;
}

E mais uma regra CSS simples, para o IE 6 5.5:

#container {
   height:100%;
}

As tags html e body

As tags html e body devem ser definidas para height:100%; isto irá permitir que definirmos um percentual para a altura na nossa div container, posteriomente. Também removi a margin e o padding da tag body, para que não fique espaços ao redor da página.

A div container

A div container tem um min-height:100%; com isto, definimos que a altura tenha pelo menos toda a tela, mesmo que quase não tenha nenhum conteúdo. Muitos navegadores antigos não suportam a propriedade min-height, então poderiamos usar técnicas com javascript e outros métodos, mas não vamos discutir isto neste artigo. A div container é setada para position:relavite, para permitir que setamos elementos com posicionamento dentro dela.

A div cabecalho

Não tem nada especial aqui. Faça esta div com cores e tamanhos que você desejar.

A div body

A div body é quase normal também. A única coisa importante é que devemos ter um bottom padding que é igual (ou ligeiramente maior) que a altura do rodapé. Você pode também usar um bottom border se você preferir, porém usar margin não irá funcionar.

A div rodapé

O rodapé tem sua altura setada em pixels (ou ems). A div é posicionada com bottom:0;para movê-la para o final da div container. Quando existir pouco conteúdo na página, o container div irá ter exatamente a altura da area de visão do navegador (por isto usamos min-height:100%;) e o rodapé irá grudar no final da janela. Quando o conteúdo for maior que a área de visão do navegador, o rodapé então ficará abaixo do conteúdo. Também definimos a largura do rodapé com width:100%; para que o rodapé utilize toda a largura da nossa div container.

O CSS para IE 6 e 5.5

As versões antigas do Internet Explorer não entendem a propriedade min-height, mas para nossa sorte o comportamento padrão da propriedade height destes navegadores, exibe exatamente o resultado que desejamos. Simplesmente usamos uma regra condicional para o IE no CSS. Veja o código da demonstração para verificar como ficará.

Neste artigo apresentamos um caminho simples e eficiente de ter o rodapé do seu site no final da área visível do navegador, quando o conteúdo for pequeno. Este artigo é uma adaptação livre do original em inglês, criado por Mattew James Taylor, que pode ser visualizado em: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

Layout três colunas com igual altura, sem utilizar hacks

Criar um layout com três colunas de mesmo tamanho (que se acompanham), utilzando CSS não é uma tarefa das mais fáceis. Este tutorial exibe o problema que ocorre com layouts de multiplas colunas, e então exibe uma solução simples, que irá funcionar muito bem em todos os navegadores com suporte a CSS.

O método exibido aqui não faz uso de javascript, hacks ou imagens. Isto faz com que ele possa ser utilizado em praticamente qualquer tipo de website desejado, por mais restrito que seja a necessidade.

O problema com colunas de mesma altura

No exemplo acima nós temos três colunas, cada uma com um diferente conteúdo. Você irá notar que o problema ocorre, por que a cor do fundo acompanha o conteúdo (primeira figura). Isto impede que as cores de fundo, de todas as colunas fiquem alinhadas, conforme desejamos (segunda figura).

Este é o problema que nós queremos resolver. Como fazer todas as colunas terem a mesma altura? Ou ainda mais especificamente: Como fazer para todas as colunas terem a mesma altura da coluna mais alta? Isto é difícil de fazer, pois em situações de conteúdo dinâmico, nunca saberemos previamente qual é a coluna mais alta, e qual será sua altura. Nós não podemos simplesmente informar um valor bem alto a todas as colunas, por que isto deixará o layout com um espaço vazio enorme no final das colunas se elas tiverem pouco conteúdo, e se elas tivererm conteúdo maior que o valor estipulado, esta técnica então não irá funcionar. Além do mais, devemos lembrar que nada é fixo na web. Pessoas acessam com diferentes resoluções e de diferentes dispositivos, navegadores, sistemas operacionais, e configurações que irão afetar o tamanho da altura do nosso conteúdo.

Separando o conteúdo da coluna da sua cor de fundo

O primeiro passo para resolver o problema das colunas com o mesmo tamanho é separar nosso quebra cabeças em pequenas peças, para que possamos resolver separadamente. O caminho para fazer isto é que iremos usar duas divs para cada coluna, no lugar de uma. Estas duas divs serão usadas, uma para o conteúdo e outra para a cor de fundo, em cada coluna. Esta separação nos dará um controle maior sobre estes elementos, de forma que poderemos manipular a todos de uma forma bem melhor. Com esta dica, você já deve conseguir enchergar as coisas um pouco mais claramente.

Uma div container com atributo float, irá sempre ter a altura do seu conteúdo

Este é o principio central por detrás do nosso método. O único caminho para fazer a altura da div igual a coluna mais alta é se esta div for um container para todas as divs de conteúdo. Explicando melhor: Colocando as colunas dentro de um container, nós iremos fazer que este container tenha a mesma altura da coluna mais alto. Esta é uma estrutura muito útil.

HTML da estrutura de 3 colunas

No exemplo acima, o conteúdo das 3 colunas estão dentro de um div container.

<div id="container1">
<div id="col1">Column 1</div>
<div id="col2">Column 2</div>
<div id="col3">Column 3</div>
</div>

Css da estrutura de 3 colunas

E aqui o CSS que força o container div para usar a altura da coluna mais alta.

#container1 {
    float:left;
    width:100%;
}
#col1 {
    float:left;
    width:30%;
    background:red;
}
#col2 {
    float:left;
    width:40%;
    background:yellow;
}
#col3 {
    float:left;
    width:30%;
    background:green;
}

Para esta estrutura funcionar corretamente em todos os navegadores, o container div deverá usar o atributo float (esquerda ou direita) e cada coluna de conteúdo também deverá usar float, caso contrário não irá funcionar muito bem. Este processo de usar float com as divs faz com que elas se alinhem horizontalmente através da página. Flotoar o container faz com que ele tenha a altura exata do seu conteúdo, que no caso é a altura da div mais alta.

Adicionando containers aninhados

O próximo passo em nosso tutorial é adicionar containers que ficarão aninhados, um dentro do outro. Nós precisamos ter tantos containers quanto colunas. No nosso caso, 3 colunas, usaremos então 3 containers. Estas três containers serão usados para a cor de fundo de cada coluna. Note que iremos remover a cor de fundo das colunas originais, e iremos adicioná-las aos containers.

HTML da estrutura de 3 colunas

Os dois extra containers foram adicionados ao nosso html.

<div id="container3">
<div id="container2">
<div id="container1">
<div id="col1">Column 1</div>
<div id="col2">Column 2</div>
<div id="col3">Column 3</div>
</div>
</div>
</div>

CSS da estrutura de 3 colunas

Todos os elementos estão usando float, para a esquerda e os containers tem uma largura de 100% para que eles utilizem todo o tamanho da página. A cor de fundo foi removida das colunas, e então adicionada aos containers.

#container3 {
    float:left;
    width:100%;
    background:green;
}
#container2 {
    float:left;
    width:100%;
    background:yellow;
}
#container1 {
    float:left;
    width:100%;
    background:red;
}
#col1 {
    float:left;
    width:30%;
}
#col2 {
    float:left;
    width:40%;
}
#col3 {
    float:left;
    width:30%;
}

Movendo os containers usanto postion relative

Usando posicionamento relativo nós agora movemos os containers para seu novo local. Quando cada container é movido, outro container fica visível. Com isto podemos mover cada camada para seu local, para podermos criar o layout com 3 colunas de mesma altura. O container2 div é movido 30% para a esquerda para revelar o verde do container 1. Este movemos 40% para a esquerda, para exibir o amarelo da coluna entral e ao mesmo tempo a sessão vermelha que ainda está visível na coluna da esquerda.

O CSS com o posicionamento relativo

Aqui está o CSS já utilizando o posicionamento relativo.

#container3 {
    float:left;
    width:100%;
    background:green;
}
#container2 {
    float:left;
    width:100%;
    background:yellow;
    position:relative;
    right:30%;
}
#container1 {
    float:left;
    width:100%;
    background:red;
    position:relative;
    right:40%;
}
#col1 {
    float:left;
    width:30%;
}
#col2 {
    float:left;
    width:40%;
}
#col3 {
    float:left;
    width:30%;
}

Movendo o conteúdo de volta para o seu lugar

A próxima coisa a fazer é mover cada conteúdo de cada coluna de volta a página, para que este fique alinhado a sua cor de fundo. Novamente, isto é feito de maneira simples, utilizando posicionamento relativo.

E então, finalmente nós adicionamos um overflow:hidden no container 3.

O CSS com o posicionamento relativo

Abaixo o CSS com o posicionamento relativo e com a regra de overflow. Observe que a regra position:relative, no container 3, é para resolver um bug do internet explorer que impediria o overflow:hidden de funcionar.

#container3 {
    float:left;
    width:100%;
    background:green;
    overflow:hidden;
    position:relative;
}
#container2 {
    float:left;
    width:100%;
    background:yellow;
    position:relative;
    right:30%;
}
#container1 {
    float:left;
    width:100%;
    background:red;
    position:relative;
    right:40%;
}
#col1 {
    float:left;
    width:30%;
    position:relative;
    left:70%;
}
#col2 {
    float:left;
    width:40%;
    position:relative;
    left:70%;
}
#col3 {
    float:left;
    width:30%;
    position:relative;
    left:70%;
}

Adicionando padding as colunas

A última coisa a fazer é adicionar padding para as colunas para que o texto não grude na borda de cada coluna. Se nós adicionarmos um CSS padding para as colunas, isto poderá funcionar em alguns navegadores, e em outrod não. Internet Explorere entende errado o box model, e isto calcula a larguda de um elemento com padding de maneira diferente. Um box com 200 pixels de largunra e 20 pixels de pading irá ter um total de 200 pixels no internet explorer, porém em todos os outros navegadores o total será 240 pixels. Padding, deveria ser adicionado para a largura de um elemento, e não subtraido dele. MALDITA MICROSOFT!

Mas não se preocupe… nõs podemos resolver este problema utilizando um caminho diferente, que não irá utilizar regras padding no css. No lugar disto, faremos nossas colunas menores (a coluna irá ser menor em ambos os lados) e então iremos movê-las na direção correta utilizando posicionamento relativo. Em nosso exemplo, iremos usar 2% de padding (ou pseudo-padding), então a coluna que tem 30% irá ser reduzida a 26%. A coluna com 40% irá se reduzir a 36%. Quando movermos as colunas de volta para o seu lugar usando posicionamento relativo nós precisaremos lembrar que as colunas agora são menores, e que estão todas a esquerda. Precisamos movê-las agora para o lugar desejado.

O CSS Completo e definitivo

Para manter o layout em pequenos tamanhos de largura, eu também adicionei um overflow:hidden para cada coluna. Isto irá impedir a coluna de interferir com o resto do layout. Novamente, isto somente é um problema com o internet explorer, todos os outros navegadores mantem o layout correto sem precisar de utilizar este atributo.

#container3 {
    float:left;
    width:100%;
    background:green;
    overflow:hidden;
    position:relative;
}
#container2 {
    float:left;
    width:100%;
    background:yellow;
    position:relative;
    right:30%;
}
#container1 {
    float:left;
    width:100%;
    background:red;
    position:relative;
    right:40%;
}
#col1 {
    float:left;
    width:26%;
    position:relative;
    left:72%;
    overflow:hidden;
}
#col2 {
    float:left;
    width:36%;
    position:relative;
    left:76%;
    overflow:hidden;
}
#col3 {
    float:left;
    width:26%;
    position:relative;
    left:80%;
    overflow:hidden;
}

Bem, isto é tudo. Eu espero que você possa ter achado útil este artigo. Brinque um pouco com este css, e veja como ele trabalha por você mesmo. Você pode ter mais colunas, lembrando sempre de usar o mesmo número de colunas e containers.

Este artigo é uma versão em português de:

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks