0

I want to have a web page that consists of boxes (div elements) with information that fill up the entire screen. This JSFiddle shows my problem, the red box (number 3) needs to move up and fill up the blank space:

https://jsfiddle.net/whug4kL1/

The following website shows exactly what I want to achieve:

http://www.zergnet.com/

When I check the source code of the website above, they use position: absolute on the boxes and have top and left hard coded. When dealing with dynamic data, how can you know the amount of pixels to use for the top and left beforehand?

So, how do I create a page that fills up the screen with boxes (div elements) leaving no vertical blank space? I'll take any solution I can, but I'd prefer a "best practice" solution rather than some dodgy "JavaScript hack".

Tom
  • 734
  • 2
  • 7
  • 27

1 Answers1

1

You need to use a plugin like Isotope or Masonry

gopalraju
  • 2,299
  • 1
  • 12
  • 15