1

I am trying to display div in rows columns using online div. Here is the same

https://jsfiddle.net/sreeram62/b5d3s/1/

Same thing below:

 <style>

*{
    margin:0px;
    padding:0px;
}
.changed{
    display:inline-block;
    vertical-align:top;
}


</style>
</head>

<body>
<div style="border:1px solid #F00; width:900px; min-height:1000px">
  <div class="changed" style="width:220px; margin:3px; border:1px solid #0C0; height:30px;"></div>
  <div class="changed" style="width:220px; margin:3px; border:1px solid #0C0; height:20px;"></div>
  <div class="changed" style="width:220px; margin:3px; border:1px solid #0C0; height:30px;"></div>
  <div class="changed" style="width:220px; margin:3px; border:1px solid #0C0; height:30px;"></div>
  <div class="changed" style="width:220px; margin:3px; border:1px solid #0C0; height:37px;"></div>
  <div class="changed" style="width:220px; margin:3px; border:1px solid #0C0; height:30px;"></div>


</div>

If you see the second div in first row is small so the 5th one (2nd row second) one has to come up but the complete second row starts on same vertical line.

Syscall
  • 16,959
  • 9
  • 22
  • 41
Ram
  • 177
  • 1
  • 1
  • 13

3 Answers3

2

What your trying to do is not possible with just CSS.

That picture you are showing is what the plugin Masonry is for. https://masonry.desandro.com/

Syscall
  • 16,959
  • 9
  • 22
  • 41
cjd82187
  • 3,101
  • 3
  • 13
  • 17
  • Interesting, I just looked up isotope. They are written by the same person and have similar features. Isotope is capable of a bit more, but it is not free for commercial use according to the site. Here's a stack overflow article explaining the difference a bit more in depth http://stackoverflow.com/questions/8856893/difference-between-isotope-and-masonry-jquery-plugins – cjd82187 May 23 '13 at 14:56
  • @cjd82187 Thanks I feel this works. Thanks for your quick reply. – Ram May 23 '13 at 15:57
0

If you don't mind reordering the divs, you could achieve a layout like this by grouping each column into its own div. Add a float:left on the columns and remove display:inline-block from the inner divs. Something like this:

<div style="border:1px solid #F00; width:900px; min-height:1000px">
  <div style="float:left">
    <div class="changed" style="width:220px; margin:3px; border:1px solid #0C0; height:30px;"></div>
      <div class="changed" style="width:220px; margin:3px; border:1px solid #0C0; height:30px;"></div></div>  
  <div style="float:left">
    <div class="changed" style="width:220px; margin:3px; border:1px solid #0C0; height:20px;"></div>
    <div class="changed" style="width:220px; margin:3px; border:1px solid #0C0; height:37px;"></div></div>  
  <div style="float:left">
    <div class="changed" style="width:220px; margin:3px; border:1px solid #0C0; height:30px;"></div>  
    <div class="changed" style="width:220px; margin:3px; border:1px solid #0C0; height:30px;"></div>
  </div>
</div>

I'm not sure if this meets your needs, since it isn't using inline divs, and the divs would need to be ordered by column. But if what you really care about is getting something that looks like your image, this will work.

Tim Goodman
  • 20,835
  • 7
  • 54
  • 80
  • thanks for the reply. Actually this happens dynamically. I am trying to display wordpress posts page in 3 columns. So when each post has differnt size the issues comes up. – Ram May 23 '13 at 15:56
0

I think ordering your layout with columns should do the trick.

<div class="column">
  <!-- your content here -->
</div>

with associated css :

.column { display: inline-block; width: 100px; vertical-align: top; }

Updated fiddle here : https://jsfiddle.net/b5d3s/3/

Syscall
  • 16,959
  • 9
  • 22
  • 41
RoyalLys
  • 96
  • 5