How can I make columns as divs flow after & beside each other (example included)

[kkw]

http://oi49.tinypic.com/2qithg4.jpg (example is a jpg img)

As You can see in the example; the boxes (after floating) gets a white space under it in order to make a room for an equal row of divs but I wanna float all of ’em to fill the gaps.. any suggestions?

That’s what I wanna do (example is a jpg img)

http://oi47.tinypic.com/2nixr2x.jpg

Thanks in advance.

[Kralle]

Take a look at Masonry: http://masonry.desandro.com/

[wolfcry911]

To achieve the look in the second example simply give all the divs the same height
edit// nevermind, after taking a closer look that’s not what you have there (but maybe it should be – its so close anyway)

[kkw]

Ya I’ve tried it after I couldn’t manage to work with it.. Demos suck big time.. currently trying Columnizer and i’m gonna tell you the results and if anyone has a better way I’d be very glad to know about specially if it was done by pure css.. Thanks Kralle :)

[kkw]

@wolfcry911 They all have the same height except the ad box & the featured box.. Both are half of the height of the other (dynamic) boxes..

And columnizer was kinda failure because it affected the two boxes on the top (featured & ad) and i’m using ’em to make the boxes like chess post’s thumb, another post’s text, another post’s thumb.. etc

Screenshot in the next link http://oi46.tinypic.com/141o2o1.jpg

[Author]

Posts