DIV element

Hi,



I have attached image please have a look.



A to I are DIV blocks, I wanted to show them in given manner, There is no specific pattern and there could be lots of DIV blocks are there. In short, DIV element one after another with DIFFERENT heights and with FIXED widths and one by one need to display.

It would be appreciate if anyone can guide me.

Thanks in advance.

 

I think you are looking for something similar to Pinterest if so than here is your answer http://demosthenes.info/blog/825/Pinterest-Style-Column-Layout-In-Pure-CSS

 

using column-count as the example @xXxpert linked to will give the wrong order though -- instead of
ABC
DEF
GHI

You'll get
ADG
BEH
CFI

as that's how column-count works -- and there's no option to flip it the other way.

Generally speaking layout concepts like this are what I like to call "not viable for web deployment" -- websites that do this usually get down on their knees in front of the proverbial equine of short stature, and generally speaking I would advise against doing this.

THOUGH if you know how many there are total to be shown, and you don't give a flying purple fish about code order, just build it as a normal old-fashioned three column layout with them out-of-order.

 

I suppose you can float:left; all of the divs?

 

you can use blocksit.js for this

 

Thank You all of you for your reply, I will try above options and get back to you.