Ir para o conteúdo

Faux Columns Sem Imagens


Criado por Bruno, Out 04 2010 14:17

Não há respostas para este tópico
  • Por favor, faça o login para responder

#1 Bruno

Bruno
  • Bruno
  • Colaborador
  • 33 Revisões

Revisou 04 outubro 2010 - 14:17

Boa galera do iMasters Code...

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

E agora, aplicando a técnica de faux-columns, mas sem imagens, sugerida no artigo acima:
http://wbruno.com.br...auxColumns.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:
:seta: Opera 9.5 Beta
:seta: FireFox 3
:seta: Internet Explorer 7
:seta: Internet Explorer 6
:seta: Internet Explorer 8 (Beta)
:seta: Google Chrome Beta
:seta: Safari 3.1.2 (Windows)
:seta: Iceweasel 3.0.6 (Linux)
:seta: Web Epiphany 2.22.3 (Linux)

Postado originalmente aqui




1 usuário(s) está(ão) lendo este código

1 membro(s), 0 visitante(s) e 0 membros anônimo(s)