2 replies to this topic

[fdebortoli]

Olá galera!
Seguinte, tô me batendo pra procurar uma solução parecida com o site do Submarino e até agora não achei nada que tivesse um resultado similar.
Olhem essa figura que eu preparei como exemplo:



Esse efeito com tabelas é baba de se fazer ... mas o bixo pega quando o negócio é tableless!!!
Alguém aí sabe como fazer esse trem???


Abraçossss!!!

[Édipo Costa Rebouças]

talvez de para fazer isso:

Alternativas:

1-a primeira coluna vc deixa com float left, a ultima com float right, vc coloca um div no meio sem width e sem float, e dentro dessas div, coloca as três divs com porcentagem.

2- você declara a div que vai conter tudo(vouchamar de #geral) com padding riht e left da largura da primeira e ultima coluna, nessas você deixa como float left e right e reclara uma margin negavita conforme a largura da div, coloca um div no meio sem float, e coloca as colunas do meio.


Bem, rapidamente eu pensei nisso, nunca tive que realmente fazer um layout fluído.

[]'s

[GuigoR10]

Em 3 colunas, utilize o seguinte código:

<div id="geral">
<div id="esquerda"></div>
<div id="meio"></div>
<div id="direita"></div>
</div>

o css será assim:

A div esquerda, você seta um width pra ela, e dá float:left.
A div direita vc seta tambem e dá um float:right:
A div do meio, você não seta tamanho, ou seja, ela vai se ajustar "no espaço que sobrar", mas precisará setar as margens laterais, que são os widths da esquerda e da direita.

Exemplo

#esquerda {
float:left;
width:200px;
}

#direita {
float:right;
width:200px;
}

#meio {
margin:0 200px;
}

Espero ter ajudado.