Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa galera do iMasters...
Achei este artigo, que resolve o problema de ter que se ter colunas com mesma altura, mas sem usar imagens, como na solução tradicional.
A renderização sem nenhuma técnica, para 3 colunas com diferentes alturas, é esta:
http://wbruno.com.br/scripts/semFauxColumns.html
E agora, aplicando a técnica de faux-columns, mas sem imagens, sugerida no artigo acima:
http://wbruno.com.br/scripts/comFauxColumns.html
A grande "chave" para essa técnica, é atribuir "overflow: hidden" para o container, e colocar margins e paddings gigantes para as colunas:
#colunaUm {
background-color: #ff0;
padding-bottom: 1000em;
margin-bottom: -999.5em;Usei para esse exemplo, um gerador de Lorem Ipsum:lol:
Testado:
http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Opera 9.5 Beta
http://forum.imasters.com.br/public/style_emoticons/default/seta.gif FireFox 3
http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Internet Explorer 7
http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Internet Explorer 6
http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Internet Explorer 8 (Beta)
http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Google Chrome Beta
http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Safari 3.1.2 (Windows)
http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Iceweasel 3.0.6 (Linux)
http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Web Epiphany 2.22.3 (Linux)
William Bruno, realmente, parabéns mesmo!!!
Excelente solução. Genial.
Sugiro até mesmo que você envie para sites como www.maujor.com e www.tableless.com.br, além da publicação em outros fóruns, pois uma solução desse tipo deve ser amplamente divulgada, visto a grande utilização e extrema facilidade, leveza e código válido.
Passarei a utilizar com freqüência essa sua idéia e indicando para todos os profissionais da área.
VEEEELHO, TU SALVOU MEU DIA!!!! :D
muito bom, eu ja tava pensando em largar a programação e i cria ovelhas nas montanhas, sério.
Dá certo.
Mas no meu caso esta complicado. Tenho 2 colunas, e logo abaixo dela um footer.
A coluna da esquerda esta atropelando o footer e batendo no fim da pagina.
>
Dá certo.
Mas no meu caso esta complicado. Tenho 2 colunas, e logo abaixo dela um footer.
A coluna da esquerda esta atropelando o footer e batendo no fim da pagina.
Aqui deu certo com o footer.. dá uma olhada no layout : clica aqui
by the way.. oq acharam desse layout ?
valeuu pela dica. http://forum.imasters.com.br/public/style_emoticons/default/graduated.gif
E se a situação for a seguinte: Layout três colunas sendo que a parte de altura variável é a central tendo as laterais apenas como complemento visual com backgrounds de fundo que se repetem verticalmente? Essa técnica funciona?
Pois desenvolvi um sisteminha em que as colunas esquerda e direita tem uma pequena imagem que se repete tanas vezes quantas forem necessárias para acompanhar o corpo. Mas só deu jeito de acompanhar ajustando height manual.
putz cara olha o meu layout.. um post acima do seu.. ele faz exatamente isso.
não sei se da maneira correta.. mas faz..
http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif
Galero o tuto funcional legal, mais o rodapé some, parece que foi atropelado pelas colunas!!!
O codigo CSS é o seguinte:
body {
background-color:#FFFFCC;
margin:0px;
}
#tudo {
width:700px;
background-color:#FFFFFF;
margin:0 auto;
overflow:hidden;
}
#topo {
height:100px;
background-color:#FF0000;
}#barraesquerda, #barradireita, #conteudo {
float:left;
width:200px;
}
#barraesquerda {
background-color:#0000FF;
width:140px;
float:left;
padding:3px;
padding-bottom:1000em;
margin-bottom:-999.5em;
}
#barradireita {
width:140px;
background-color:#00FF00;
float:right;
padding:3px;
padding-bottom:1000em;
margin-bottom:-999.5em;
}
#conteudo {
background-color:#CCCCCC;
float:left;
margin: 0s;
width:400px;
padding-left:4px;
padding-right:4px;
padding-bottom:1000em;
margin-bottom:-999.5em;
}
#rodape {
height:50px;
background-color:#660033;
clear:both;
}O que pode ta acontecendo?
Vlw galera conto com a ajuda de vocês!!
O teu rodapé está dentro do #tudo?
O overflow: hidden, provavelmente está escondendo ele. Retire o rodapé desse lugar da marcação, e coloque após o #tudo.
No caso do D.Molin, ele aplicou errado. Pois o overflow, se encarrega de não deixar nenhuma coluna 'extrapolar' limites..
Valeu William Bruno, foi exatamento isso, ajuste feito e problema resolvido!!!! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
Vlwwwwww!!!!!
MUITO bom William, gostei mesmo, simples, pratica e eficiente, grande achado e grande feito
PARABENS ;)