Blog do Penha: Colunas com alturas iguais em CSS

segunda-feira, 27 de abril de 2009

Colunas com alturas iguais em CSS

Enviado para você por Penha através do Google Reader:

Colunas com alturas iguais em CSS

via Pinceladas da Web - XHTML, CSS, JavaScript e WebStandards de Pedro Rogério em 27/04/09

A algum tempo atrás recebi um e-mail de um leitor aqui do blog me perguntando se conhecia alguma solução para colunas com alturas iguais em CSS, acabei mandando pra ele uma solução em jQuery, mas depois lembrei que conhecia uma solução bem simples utilizando CSS puro, que encontrei aqui no CSSBlog.es. Você pode atingir esse mesmo efeito com a utilização de JavaScipt, mas não atingiria aqueles usuários que não navegam com o JavaScript habilitado por necessidade ou por opção. Recorrer a tabelas? Nem pensar.

Imagem retirada do site de Matthew James Taylor

A solução para conseguir colunas com alturas é que o conteúdo de pelo menos uma delas deve ser maior do que todas as outras, fazendo com que a coluna com menor conteúdo acompanhe as outras em paralelo.

O código HTML de exemplo seria o seguinte:

 <div id="container">     <div id="content">         <p>bla bla bla bla</p>         <p>bla bla bla bla</p>     </div>     <div id="menu">     	bla bla bla bla     </div> </div>

Agora basta aplicar o seguinte código CSS ao HTML:

 #container {     background-color: #fff;     overflow: hidden;     width: 780px;     margin: 10px auto 5px auto;     border: 1px solid #000; } #content {     background-color: #fff;     width: 580px;     border-right: 200px solid #0099FF; /* largura e cor do background do menu */     margin-right: -200px;     float: left; } #menu {     width: 200px;     float: left;     color: #fff;     background: #0099FF;     text-align: left; }

Vamos as explicações: Aplicamos uma cor de fundo e uma borda de 200px a div #content e uma margem direita de -200px para que quando for inserido o nosso #menu esse fique encima da div #content e essa borda finja ser uma coluna na lateral direita. A medida que o conteúdo aumenta a borda também aumenta, simulando uma coluna. Vejam só o exemplo de colunas com alturas iguais em css.