3

I want to create a wall of quotes that are contained inside different colored rectangles.

Obviously, the quotes will be different lengths and I want the rectangles to be randomly sized widths - which will mean the heights are going to be correspondingly sized.

I'm using float: left, but this leaves lots of gaps. It would be great if the rectangles could tessellate.

I'm not quite sure if this problem fits the 2D packing problem or other questions such as this one: Fitting rectangles together in optimal fashion. If it does, I don't know how to translate a solution into php/css/jquery. Otherwise, any other thoughts would help :)

Community
  • 1
  • 1
Paul
  • 804
  • 2
  • 13
  • 31
  • Floating does not leave gaps. Margin does and margin can be set to zero. Padding, too. And just cause it needs to be said, CSS is not a programming language so don't look to it to help with this. – Rob Oct 26 '11 at 12:12

1 Answers1

4

You should take a look at the Masonry jQuery plugin:

http://masonry.desandro.com/demos/basic-multi-column.html

Or Isotope (by the same guy, David Desandro):

http://isotope.metafizzy.co/

Hope that helps :)

will
  • 4,557
  • 6
  • 32
  • 33