I need an algorithm to calculate best fit for rectangles in a larger rectangle.. and the larger rectangle changes size dynamically. More details:
I am using the Code52 Metro UI project: http://code52.org/metro.css/
I am using only ONE tile row and all the tiles have "float:left" defined. This works beautifully when all the tiles are of the same size.. a user can resize the browser to any width and the tiles just "drop down" under each other. Now the problem comes in when I want different tile sizes. This breaks everything and is obviously why people generally design metro UIs as fixed width. Well, I need to go with a fluid layout if possible. Tile sizes are pre-defined as follows:
Single: 130px x 130px
Double Horizontal: 130px x 280px
Double Vertical: 280px x 130px
and Double Both: 280px x 280px
Container is fluid, so width/height changes dynamically.
What I need is an algorithm to make a best-fit for the tiles.. so any empty spaces will only be at the bottom-right corner and not mixed in with the tiles. Any math genius here with an idea?