Question

Please refer to http://lrin.tk/float_problem.htm.

Here’s how my page looks like:

   +-----------------------+ +---------------------------+ +--------------+ 
   |]]]]]]]]]]]]]]]]]]]]]]]| |___________________________| |::::::::::::::| 
   |]]]]]]]]]]]]]]]]]]]]]]]| |___________________________| |::::::::::::::| 
   |]]]]]]]]]]]]]]]]]]]]]]]| |___________________________| |::::::::::::::| 
   |]]]]]]]]]]]]]]]]]]]]]]]| |___________________________| |::::::::::::::| 
   |]]]]]]]]]]]]]]]]]]]]]]]| |___________________________| |::::::::::::::| 
   +-----------------------+ |___________________________| +--------------+ 
                             |___________________________|                  
                             |___________________________|                  
                             |___________________________|                  
              [2]            |___________________________|       [1]         
                             |___________________________|                  
                             |___________________________|                  
                             +---------------------------+                  
       +--------------+ +------------+ +----------+ +---------------------+ 
       |**************| |````````````| |==========| |"""""""""""""""""""""| 
       |**************| |````````````| |==========| |"""""""""""""""""""""| 
    [3]|**************| |````````````| |==========| |"""""""""""""""""""""| 
       |**************| |````````````| |==========| |"""""""""""""""""""""| 
       |**************| |````````````| |==========| |"""""""""""""""""""""| 
       +--------------+ +------------+ +----------+ +---------------------+ 
                                              +---------------------------+ 
                                              |{{{{{{{{{{{{{{{{{{{{{{{{{{{| 
                                              |{{{{{{{{{{{{{{{{{{{{{{{{{{{| 
                                              |{{{{{{{{{{{{{{{{{{{{{{{{{{{| 
                                              |{{{{{{{{{{{{{{{{{{{{{{{{{{{| 
                                              |{{{{{{{{{{{{{{{{{{{{{{{{{{{| 
                                              |{{{{{{{{{{{{{{{{{{{{{{{{{{{| 
                                              +---------------------------+ 

• All divs’ height are fixed to a certain value. In the HTML file, 200px.

• Actually, the ___________-striped div is fixed(not CSS-ually position:fixed) on the upper-right side.

When the window is re-sized (with a threshold of 20px), a reArrange function is called.
Now the code just simply shuffle the divs, so the inflexible browser just leaves area #1 and area #2 empty, not to mention a little slice of area #3.

However the divs are arranged, I would like it to fit the most areas of a line.
Which means,a new line is started only when the current line has no space to hold any (actually “the most narrow one”) of the un-ordered divs.

So in the example, the ideal result should be:

 +--------------+ +--------------+ +---------------------------+ +------------+ 
 |::::::::::::::| |**************| |___________________________| |````````````| 
 |::::::::::::::| |**************| |___________________________| |````````````| 
 |::::::::::::::| |**************| |___________________________| |````````````| 
 |::::::::::::::| |**************| |___________________________| |````````````| 
 |::::::::::::::| |**************| |___________________________| |````````````| 
 +--------------+ +--------------+ |___________________________| +------------+ 
         +-----------------------+ |___________________________|   +----------+ 
         |]]]]]]]]]]]]]]]]]]]]]]]| |___________________________|   |==========| 
         |]]]]]]]]]]]]]]]]]]]]]]]| |___________________________|   |==========| 
         |]]]]]]]]]]]]]]]]]]]]]]]| |___________________________|   |==========| 
         |]]]]]]]]]]]]]]]]]]]]]]]| |___________________________|   |==========| 
         |]]]]]]]]]]]]]]]]]]]]]]]| |___________________________|   |==========| 
         +-----------------------+ +---------------------------+   +----------+ 
                          +---------------------+ +---------------------------+ 
                          |"""""""""""""""""""""| |{{{{{{{{{{{{{{{{{{{{{{{{{{{| 
                          |"""""""""""""""""""""| |{{{{{{{{{{{{{{{{{{{{{{{{{{{| 
                          |"""""""""""""""""""""| |{{{{{{{{{{{{{{{{{{{{{{{{{{{| 
                          |"""""""""""""""""""""| |{{{{{{{{{{{{{{{{{{{{{{{{{{{| 
                          |"""""""""""""""""""""| |{{{{{{{{{{{{{{{{{{{{{{{{{{{| 
                          +---------------------+ |{{{{{{{{{{{{{{{{{{{{{{{{{{{| 
                                                  +---------------------------+ 

To me, it looks like a few “dynamic programming” or “recurrence” would do the trick. However, I am only a high school student, no expert in programming.

Is this ever possible?

Answer 1

I’m not sure if you can make it more lightweight or customize it but Isotope has a lot of options.

JQuery Isotope – http://isotope.metafizzy.co/

Also be sure to read the help which could help debug any problem you might run into – http://isotope.metafizzy.co/docs/help.html

You can also read more about the plugin at Github – https://github.com/desandro/isotope – from where you can also download the minified version of the code.

There is another plugin which is incorporated into one of the layout mdoes used in Isotope. JQuery Masonry – http://masonry.desandro.com/. Masonry allows you to plug empty spaces in your layouts by arranging and aligning floated elements vertically rather than horizontally.