Colunas com alturas iguais em CSS
Postado por: Pedro Rogério emA 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.
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o Pinceladas da Web também escreve para o CSS no Lanche, blog voltado ao desenvolvimento front-end.
Pedrão,
E ae cara.
Legal a dica, agora, só uma dúvida.
Na sua opinião, isso é recurso do css, técnica de diagramação ou é POG ?
Existem outras dicas como essa que ajudam muito, mas sempre tenho a dúvida se não é uma gambi.
Eu uso muito coisas como “margin-right: -200px;” mas acho muito feio isso.
[]´s
POG no talo.
Se quisermos usar imagem de fundo diferente pra cada coluna? Suicídio?
Ainda prefiro o jQuery, ou planejar de forma correta que não precisamos fazer coisas do tipo.
Quando me deparo com esse tipo de problema recorto um filete* horizontal do container e coloco de background repetindo em y, dessa forma todas as colunas menores terão seus backgrounds e limites preservados diante do crescimento das demais.
Mas de toda forma valeu pela dica!!!
Falow!!
*extraído do psd
Esta técnica é boa, porém introduz certas limitações das quais é preciso estar bem consciente. Use com moderação…
POG Total ! rss…
Geralmente faço assim:
- Crio as 3 colunas e coloco dentro de uma DIV pai;
- Nessa Div pai coloco uma imagem de background de 1px de altura e a largura do website repetindo para baixo;
- Ponho height:100% nas 3 colunas e um min-height na div pai;
Simples e viavel, eu prefiro.
Acredita que o Twitter usa table pra fazer isso?
Bah Mano!
Exemplo tosco de apelação, usando a borda pra esconder.
Paia. Muito Paia!
Não gostei, pois pelo meu entender caso da coluna da direita seja maior do que a da esquerda o efeito não vai acontecer e ainda vai deixar o layout meio estranho. Eu normalmente uso jQuery e faço isso com 3 linhas de codigo o que torna muito mais fácil a compreensão e a posterior edição, uma vez que, eu coloquei esse código em um arquivo js separado e sempre que eu quiser usar é soh chamar o script e adicionar classes as colunas que eu quero que tenha a mesma autura ou simplesmente chamar uma funcao no onload da pagina, já passando os parametros…
manda essa solução em jquery ou entao posta aqui
abraço
Ae Diego…
fiz uma pagina usando o exemplo acima… Mas mudei o conteudo das divs, que continuam com o mesmo formato, apenas adicionei uma div “cleaner” no final da pagina pra limpar os floats… para ver como ficou clica no meu nome e qualquer coisa pode adicionar conteudo na coluna da direita que elas continuam com o memo tamanho…
abracos
Eu uso o POG com imagens, criando um filete do tamanho do meu layout e com cores diferentes e tamanhos diferentes se preciso.
Em primeiro lugar, parabéns para você e seu site. Sempre que posso acesso este site. Mas me diga uma coisa: No código html, colocamos este código de colunas iguais (que você cita acima) em que parte do documento?
@Elvis,
Basta seguir o exemplo:
http://www.pinceladasdaweb.com.br/blog/uploads/colunas-mesma-altura/
Ôpa! Muito valiosa essa dica, mas gostaria de saber, se essa porcentagem(%) pode ser tranformada em pixels(px), pois queria determinar a largura de cada DIV, tipo a do lado esquedo com 160 de largura a do meio com 470 de largura e a direita com 160 tolalizando 790 de largura da minha página isso é possível? Quem souber de alguma noticia sobre isso por favor gostaria muito de uma resposta muito grato valew muita paz!