segunda-feira, 27 de abril de 2009

Colunas com alturas iguais em CSS



 
 

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

 
 


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.

Colunas com alturas iguais em CSS

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.

Isso pode lhe interessar:


Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?


Colunas com alturas iguais em CSS


 
 

Coisas que você pode fazer a partir daqui:

 
 
TwitThis
Share |

0 comentários:

;

Pesquisa na WEB

Carregando...

assine o feed

siga no Twitter

Postagens

acompanhe

Comentários

comente também