Fill Tiles One By One Even Different Width And Height

Please refer the image, I think once you see realize the issue. I tested this tiles in two ways, like UL,LI list and by set of DIVs but none of was success. I just added float:left

Solution 1:

I use JQuery Masonry for designing like this.

Using its CSS along with JQuery you should be easily able to get what you want.

Solution 2:

html

<tableborder="1"><tr><td></td><td></td><td></td></tr><tr><tdcolspan=2></td><td></td></tr><tr><td></td><td></td><tdrowspan=2></td></tr><tr><tdcolspan=2></td></tr><tr><td></td><td></td><td></td></tr></table>​

css

table {background:black;}
td {background:blue;width:40px;height:40px;}​