2

I want to be able to "wrap" different divs with different sizes Something like what Microsoft Word does with text wrapping, square, it just blends in with the rest.

I have a structure simplefied here

<div id = "div1"></div>
<div id = "div2"></div>
<div id = "bigdiv1"></div>
<div id = "div3"></div>
<div id = "div4"></div>
<div id = "div5"></div>
<div id = "div6"></div>
<div id = "div7"></div>
<div id = "div8"></div>
<div id = "div9"></div>
<div id = "div10"></div>

Which would look like: http://postimg.org/image/d3mot921d/ But i want it to look like: http://postimg.org/image/w8doc5ofx/ Also using float left and right wont work as desired (I think), because I want to be able to put in multiple of those big divs. so 3 of the big divs should float with small divs inbetween. But you get those white spaces, for which I have no idea how to remove them.

Also Using Javascript and Jquery would be OK.

I have not yet found a solution that even comes close to what I want, I hope some of you know how to do this.

  • this is dificult with pure CSS, check out the masonry plugin http://masonry.desandro.com/ – actual_kangaroo Dec 10 '13 at 11:39
  • 1
    As said I'm willing to use Javascript, but I would like a CSS version, if not possible then I will use the plugin, thanks for the answer –  Dec 10 '13 at 11:41

1 Answers1

0

There are several ways to acomplish this, I'll list a few here:

using CSS3 columns (relatively poor browser support). Check out Someone else's jsFiddle

.parent-div{
   -moz-column-width: 13em;
   -webkit-column-width: 13em;
   -moz-column-gap: 1em;
   -webkit-column-gap: 1em;
}

Using the masonry library

$('.parent-div').masonry({
   // options
   columnWidth: 200,
  itemSelector: '.item'
});

Changing your HTML structure to include column divs

<div class="two-columns">
    <div></div>
    <div></div>
</div>
<div class="double-wide">
</div>
<div class="two-columns">
    <div></div>
    <div></div>
    <div></div>
</div>

Personaly, I recommend using the masonry jQuery plugin for backwards compatibility. Or CSS3 columns if targeting modern browsers only (ie10 and better)

Community
  • 1
  • 1
actual_kangaroo
  • 5,971
  • 2
  • 31
  • 45
  • Ok so i got this JSfiddle http://jsfiddle.net/VyxRs/1/ (make it wider to show that it is bad) using the first option you said, it will break the width of my divs (or maybe I'm doing it wrong) Havent tried the third option yet, will see what that does, but if i can't use the other options, I will use the Masonry plugin, im just holding back on that a little looking for a CSS solution. –  Dec 10 '13 at 12:07