Solução para Faux Columns sem usar imagens

[William Bruno 1501]

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;
}

você pode verificar o código completo nos links que postei para exemplo, e vizualização.

 

 

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)

[brcontainer 16]

MUITO bom William, gostei mesmo, simples, pratica e eficiente, grande achado e grande feito

PARABENS ;)

[newboxters 0]

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.

[Matheus Knebel 0]

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.

[André D. Molin 15]

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.

[Brayan Rastelli 2]

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

[Bruno Augusto 417]

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.

[Brayan Rastelli 2]

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

[the_wizard 0]

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!!

[William Bruno 1501]

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..

[the_wizard 0]

Valeu William Bruno, foi exatamento isso, ajuste feito e problema resolvido!!!! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Vlwwwwww!!!!!