1

Does anyone know how to put multiple div (box) with multiple size in the big container to let blank space only in the bottom of the container ?

Here is a representation of what i want:

enter image description here

Here is what I have:

enter image description here

Thanks!

fliim
  • 2,059
  • 4
  • 18
  • 31

3 Answers3

3

It sounds like you're trying to fit multiple containers of various sizes into a single container with a known size to get the best fit you can. JQuery masonry is perfect for that, if you're willing to use jQuery, though there is no guarantee that it would leave all of the blank space at the bottom.

Documentation here: http://masonry.desandro.com/

Demo here: http://masonry.desandro.com/demos/basic-single-column.html

And you can set gutterWidth to 0 to take out all space between columns. http://masonry.desandro.com/docs/options.html

jaimerump
  • 882
  • 4
  • 17
  • 35
  • yeah, its something like this. I will try it. Thanks – fliim Aug 13 '12 at 19:06
  • There is a way to doing it without JS ? Only using CSS? – fliim Aug 13 '12 at 19:47
  • @fliim I'm not very skilled at CSS myself, but if there is it's probably documented at http://css-tricks.com/, did you have trouble with the plugin? – jaimerump Aug 13 '12 at 19:56
  • Masonry works good but my problem is that i use a list instead of div. And I re-order my boxes without moving the html element (only by css with a js plugin). So the masonry 'reload' method didn't works after the re-ordering. – fliim Aug 13 '12 at 20:15
  • Better still, use http://isotope.metafizzy.co/ which is Masonry's bigger brother with more options and also dead easy to implement. There is also http://codecanyon.net/item/jquery-tiles-gallery/2281417 for mainly image based layouts. With only CSS, you can't achieve what you depict. – Systembolaget Aug 14 '12 at 12:51
  • @fliim Using list elements shouldn't be a problem, that's what I use with masonry. You just have to change the selector from "div.class" to "li.class". Or you could go with one of the other plugins Systembolaget recommended, though isotope rather upsets me with the way they mangled the element symbols. – jaimerump Aug 14 '12 at 13:59
  • actually I found isotop too and use with the masonry layout it works good. But it cant sort with multiple criteria :( – fliim Aug 14 '12 at 15:06
  • @fliim What do you mean by multiple criteria? Multiple class names or something? If you want to layout all elements with class1 or class2 you can use a selector like .class1, .class2. See this question. http://stackoverflow.com/questions/1041344/jquery-multiple-class-selector – jaimerump Aug 14 '12 at 18:03
  • For example, I would like to put all items with class A or class B or more to the top. which A and B are categories. Its a kind of sort. it is possible ? – fliim Aug 14 '12 at 18:14
  • I'm pretty sure masonry doesn't allow you to do anything like this, but I found a section on sorting in the isotope docs, maybe that's what you're looking for. http://isotope.metafizzy.co/docs/sorting.html – jaimerump Aug 14 '12 at 18:23
  • I already saw this part 10 times :(, it allows just to sort one criteria in a time with ascendent or descendent ordering. By the way, the multi sort should be come in the next version (v1.6) but its looks that it doesnt updated anymore. https://github.com/desandro/isotope/issues/2 – fliim Aug 14 '12 at 19:13
  • You might be able to do something like `getSortData: { class: function($elem){return $elem.attr('class')}}` to get the class of each element, then set `sortBy: 'class'` to sort by the classes. Though unless your class names are actually A and B, I'm not sure how you could set them at the top unless you actually add A and B as classes and then sort in alphabetical order. – jaimerump Aug 14 '12 at 19:21
1

Without more information (your current code, a diagram, a sample website), I'm not really sure what you're asking here. If you're just looking to add bottom spacing to a container, try using CSS with padding-bottom?

William Hawke Bassignani
  • 310
  • 2
  • 4
1

Do you mean somethink like http://jsfiddle.net/ZFdHz/ ??

Oriol
  • 274,082
  • 63
  • 437
  • 513