Is it possible to increase the size of a div in steps?

Question

I have a centered div with floating elements in it, each element has the same height and width and floats. When a div is resized, there is always a gap on the right side that does not have enough space to accommodate another element. I want the div to expand only when it could correspond to another element, and not just take place. Is it possible?

Answer 1

CSS3 Solution

Using some @media query calls (so there is a practical limit to how big can go) gives good results in CSS3 browsers. See this script ( full screen ) that uses this (example only) code:

HTML

 <ul class="container"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> 

CSS

 @media screen and (min-width: 122px) { .container {width: 120px;} } @media screen and (min-width: 242px) { .container {width: 240px;} } @media screen and (min-width: 362px) { .container {width: 360px;} } @media screen and (min-width: 482px) { .container {width: 480px;} } @media screen and (min-width: 602px) { .container {width: 600px;} } /* you need to decide just how far to take it */ .container { margin: 10px auto; overflow: hidden; border: 1px solid red; height: 210px; } li { width: 100px; height: 50px; background: cyan; float: left; margin: 10px; } 

It is also possible that you or other users might find this useful .

Answer 2

It seems that you are looking for functionality similar to Masonry . This is the same structure as Pinterest (if not a plugin ) that Pinterest uses.

I do not think that this is limited to elements of an unusual shape, so it should work fine.