CSS column Tex -moz-column Sortering

Jag har en lista med objekt som ser ut som nedan. "tWo_Wrapper" är behållaren och "tWo_WorkWrapp" är de innehållsbärande objekten.

Nu spottar jag ut fler "tWo_WorkWrapp" med AJAX och har problem med ordningen. Jag antar att den här "column" grejen är bäst anpassad för text men skulle bli sjukt snyggt att lösa t.ex. en sån här sida: http://reformrevolution.com/ med, med pure CSS.

Problemet jag har är att om jag först spottar ut 1,2,3,4 så hamnar de rätt, tills de börjar byta rad. Sedan vill de ordna sig som om de hade flödats som text, alltså att objekten fylls på från vänster topp tills de når den dynamiska botten då de fylls på från nästa column uppifrån och ner. Det jag vill uppnå är samma effekt som sidan jag länkade till att de alltid fylls på underifrån.

.tWo_Wrapper{
   margin-top: 30px;
   position: relative;
   width: 100%;
	
   -moz-column-count: auto;
   -moz-column-gap: 20px;
   -moz-column-width:250px;
	
   -webkit-column-count: auto;
   -webkit-column-gap: 20px;
   -webkit-column-width:250px;
	
   column-count: auto;
   column-gap: 20px;
   column-width:250px;

}
.tWo_WorkWrapp{
   background-color: #FFFFFF;
   padding: 10px;
   display: inline-block;
   margin-left:0px;
   margin-bottom:20px;
}

Att fylla ut det över hela sidan är inga problem. Enda problemet jag har kvar är som sagt att den fylls på från vänster topp och ner i kolumner istället för från vänster topp, horisontellt mot höger hörn och sedan fyller på under där det passar.

Jo, om jag vill använda Javascript så är det en lösning, som jag kollat på. Men jag har blivit tjurig och vill lösa det utan eller iaf minimalt med javascript som jag i sådana fall skriver själv.

Det optimala är en renodlad CSS lösning och det måste ju (tycker jag) gå lösa att sortera dem annars inne i en column mech?

Yes, exakt så där ska det se ut och så där ser det ut för mig då jag började tråden. Fantastiskt bra att du kunde visa det så andra förstår, bra sida!

Problemet som är kvar då om du använder t.ex. Firebug är att om du följer boxlistan nedåt så ser du att de inte ligger horisontalt ordnat utan vertikalt utifrån vänsterkanten. Dvs BOX-1 är längst upp till vänster, BOX-2 är nedanför denna istället för till höger om den. Är ni med, eller förklarar jag uruselt?

Du verkar ha rätt. Med tanke på hur länge jag nött på detta och hittar ingen lösning.. Jag hatar termen men måste ändå säga det. De är ju lite stört faktiskt! Jag förstår konceptet att det ska flöda som text, och detta är ju jättebra för det ändamålet men för det jag (och antagligen massor andra vill göra) funkar det inte och finns ingen lösning i scopet. Det suger!

Mm, absolut!

Det är till vår (wdo.se) nya hemsida. Så inget stort outside the box direkt men den här problemställningen har varit en av mina heliga graler och jag trodde att 2012 skulle bli året. Jag postar en länk till webben då den är ute.