Faaaala, galera!

Então, hoje vou mostrar dois jeitos de se fazer o conhecido Faux Column com CSS.

Para quem não sabe, esse cara chamado Faux Column é aquele usado no Twitter, sabe? Onde as duas colunas ficam sempre com a mesma altura.

Você pode se perguntar: “Então pra que eu vou ver este tutorial? Vou direto no source do Twitter. =P“

Pois bem… A diferença do meu tutorial e o código do Twitter, é que nele (no Twitter) o código é totalmente feio, leia-se tabelas!

Bem, chega de blá blá e vamos ao que interessa.

O HTML base para os dois métodos será o mesmo, claro.

<div id="container">
<div id="content">
<!-- Seu conteúdo aqui -->
</div>
<div id="side_base>
<!-- Seu conteúdo aqui -->
</div>
</div>

Primeiro método

*{
margin: 0;
padding: 0;
}

body{ background: #dcd1be; }

p{
font-size: 11pt;
font: 10.8pt 'Lucida Grande', sans-serif
}

div#container{
width: 1000px;
margin: 0 auto;
overflow: hidden;
}

div#content,
div#side_base{
padding: 0 3px 90001em 3px;
margin: 0 0 -90000em 0;
}

div#content{
float: left;
width: 840px;
background: white;
}

div#side_base{
float: right;
width: 148px;
background: #13C9FF;
}

Os pontos cruciais desse métods são:

  1. O seu container deve ter overflow:hidden para esconder o excesso que vem após o conteúdo
  2. As colunas devem receber um padding gigante e, ao mesmo tempo, um margin negativo podendo ser um pouco menor para o conteúdo não ficar grudado
  3. Definir as larguras das colunas

Segundo método

*{
margin: 0;
padding: 0;
}

body{ background: #dcd1be; }

p{
font-size: 11pt;
font: 10.8pt 'Lucida Grande', sans-serif
}

div#container{
width: 1000px;
margin: 0 auto;
}

div#content{
float: left;
width: 840px;
background: white;
padding: 5px;
border-right: 150px solid #13C9FF;
margin-right: -150px;

}

div#side_base{
float: right;
width: 150px;
}

Como vocês podem ver, esse método trabalha com bordas pra fazer a(s) coluna(s).

O que você deve entender desse método são:

  1. Manter as larguras das colunas
  2. Para fazer a coluna, use border e coloque um margin negativo com a mesma largura da borda

Exemplo dos dois métodos online

Se você estudar bem esses código, consegue aplicar alguns efeitos com imagens, mas se quiser ver um outra solução, indico essa aqui do Maujor.

Bem, é isso pessoal. Até a próxima. ;)