Como fazer as divs quebrarem de coluna?

[ebotega 2]

Então, imaginem que tenho várias divs de 100px X 100px dentro de uma maior de 500px X 500px, o que eu gostaria e colocar essas divs menores uma abaixo da outra e quando chegasse no final dessa div maior as outras que vierem passasem para uma segunda coluna como se fosse colunas de um texto mesmo... vai até embaixo e quando chegar no final passa para cima numa segunda coluna.

 

Como fazer isso?

 

 

:thumbsup:

[Giovani 104]

Float pode resolver :thumbsup:

Melhor ainda se altura e largura forem fixas!

[Marrabel 20]

Ideiazinha:

 

#pai {
 float:left; /* A direção é opcional */
 height:510px;   /* Aumentei 10px devido a margin para uma camada nao colar na outra */
 width:510px;
}

#filho1{
height:100px;
width:100px;
margin:2px 0 2px 0;
}

#filho2{
    /* E assim sucessivamente /*
}

 

HTML:

 

<div id="pai">
 <div id="filho1">Filho 1 </div>
 <div id="filho2">Filho 2 </div>
 <!-- E Assim sucessivamente -->
</div>

[ebotega 2]

pois então, alterei algumas coisas conforme abaixo...

 

Como terei que repetir a css 'filho1', deixei como class.

 

<style type="text/css">
#pai {
 float:left; /* A direção é opcional */
 height:510px;   /* Aumentei 10px devido a margin para uma camada nao colar na outra */
 width:510px;
 background-color:#999;
}

.filho1{
height:100px;
width:100px;
margin:2px 0 2px 0;
background-color: #3CC;
}
</style>

 

... e repeti ela no html simulando várias ocorrências.

 

<div id="pai">
 <div class="filho1">Filho 1 </div>
 <div class="filho1">Filho 1 </div>
 <div class="filho1">Filho 1 </div>
 <div class="filho1">Filho 1 </div>
 <div class="filho1">Filho 1 </div>
 <div class="filho1">Filho 1 </div>
 <!-- E Assim sucessivamente -->
</div>

 

 

o problema é que ao chegar no final, depois de 5 divs, a sexta 'foge' da div pai, ela não vai lá pra cima como se fosse a segunda coluna.

 

...

[Giovani 104]

1) como você vai colocar vários "filhos", não esqueci de somar as alturas deles;

2) o que vai ser isso? o que vai ali dentro? Dependendo da sua resposta trabalha com tabelas mesmo :thumbsup:

[Marrabel 20]

Devido a altura da div pai. Ta ultrapassando...

 

Tire o height e veja se muda.

[ebotega 2]

então...

 

Chegamos a essa div 'pai' pois foi o que me veio à cabeça para fazer as divs menores passarem para a outra coluna, mas a real necessidade é:

 

- tenho a div 'A' que seria uma filial.

- dentro da div 'A' eu teria outras duas divs, uma com o nome do cara e outra o fone, essas menores com 'float:left' para ficar uma ao lado da outra dentro dessa div 'A'.

- essa div 'A' teria uns 150... 200px no máximo, mas a altura é variável devido ao número de nomes que eu posso colocar dentro dessa filial.

- na folha, pois seria um pdf do tamanho de uma folha A4, eu teria várias divs 'A', sendo cada uma delas uma filial diferente com os seus devidos funcionários.

- quando chegar no final da folha eu queria que a próxima div 'A' fosse lá para cima, formando uma nova coluna, por isso eu pensei em jogar isso dentro de uma div maior (pai).

 

ufa... espero que tenham entendido. Valeu pela força até agora...

 

:blush:

 

 

Então Marrabel, esqueci de mencionar incialmente que isso irá em um PDF, do tamanho de um A4, por isso tenho que limitar a altura...

[Thiago Moraes 32]

1) como você vai colocar vários "filhos", não esqueci de somar as alturas deles;

2) o que vai ser isso? o que vai ali dentro? Dependendo da sua resposta trabalha com tabelas mesmo :thumbsup:

 

Acho melhor trabalhar com tabela.

[Marrabel 20]

O tamanho A4 em pixel's é de 2480 x 3508.

 

Mas vindo de um site, a impressão redimensiona (acho) para o formato da folha.

 

Já que os "filhos" não terão uma altura fixa, acho que nesse caso é melhor você fazer com tabelas.

 

Acho que para ficar distribuido igualmente tem que ser feito um calculo aonde pega-se o numero de divs e divide por 100 e fecha o resultado em % e esse resultado em % será o height da linha da respectiva coluna.

 

Com javascript creio que de pra fazer. Se você tiver usando linguaguem de programação, da também.

 

Não sei ao certo, mas acho que da pra ter uma ideia :mellow:

No google da vida deve ter algo a respeito.

[ebotega 2]

pois é, essa listagem é dinâmica (php), também acho que tabela seria a saída, mas não sei como tornar isso automatizado com tabelas...

 

vou fritar a cabeça aqui ver se sai algo.

 

:thumbsup:

[Evandro Oliveira 331]

Vale CSS3 ???

 

http://tableless.com.br/css3-columns/

http://www.css3.info/preview/multi-column-layout/

http://www.quirksmode.org/css/multicolumn.html

 

Pra navegadores antigos, você pode se virar com jQuery

http://codeasily.com/jquery/multi-column-list-with-jquery

http://welcome.totheinter.net/columnizer-jquery-plugin/