Div display using inline-block

Question

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

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 · Accepted Answer · 2021-04-17 09:47:51Z

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/

edited Apr 17, 2021 at 9:47

Syscall

19.8k10 gold badges44 silver badges60 bronze badges

answered May 23, 2013 at 14:48

cjd82187

3,5933 gold badges17 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

cjd82187 Over a year ago

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 stackoverflow.com/questions/8856893/…

Tim Goodman · Accepted Answer · 2013-05-23 15:00:27Z

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.

answered May 23, 2013 at 15:00

Tim Goodman

24k8 gold badges67 silver badges85 bronze badges

1 Comment

Ram Over a year ago

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.

Syscall · Accepted Answer · 2021-04-17 09:48:01Z

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/

edited Apr 17, 2021 at 9:48

Syscall

19.8k10 gold badges44 silver badges60 bronze badges

answered May 23, 2013 at 16:50

RoyalLys

965 bronze badges

Collectives™ on Stack Overflow

Div display using inline-block

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related