inline block with pintrest like boards

Question

I want the inner div to flow to top automatically.Like Pintrest UI

HTML

<div class="wrapper">
<div class="iB">Content<br>Content<br>Content<br></div>
<div class="iB">Content<br>Content<br>Content<br>Content<br>Content<br>Content<br></div>
<div class="iB">Content<br>Content<br>Content<br></div>
<div class="iB">Content<br>Content<br>Content<br>Content<br></div>
<div class="iB">Content<br>Content<br>Content<br>Content<br></div>
<div class="iB">Content<br>Content<br>Content<br></div>
<div class="iB">Content<br>Content<br>Content<br>Content<br></div>
</div>

CSS

.wrapper {
width: 100%;
background: red;
text-align: center;
}

.iB {
display:inline-block;
vertical-align:top;
width: 200px;

background: green;
 }

possible duplicate of [How to remove the space between inline-block elements?](http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements) — FelipeAls, May 14 '13 at 05:25
Though I voted for duplicate, the only error-free solution there is Andrea Ligios solution where an HTML comment (or "gluing" end and start tags) is used. tl;dr solve it in HTML code not with CSS (something can always go wrong with CSS). No whitespace? Don't even write it in the first place — FelipeAls, May 14 '13 at 05:29
This isn't "whitespace" then. Look for `vertical-align` or Masonry as stated by Mr. Alien — FelipeAls, May 14 '13 at 05:32

score 1 · Answer 1 · answered May 14 '13 at 05:38

Using display: block; in conjunction with float: left; omits this problem. But that'll require some additional efforts to center the whole cluster.

Another workaround is masking the line breaks:

<div class="iB">Content<br>Content<br>Content<br>Content<br></div><!--
--><div class="iB">Content<br>Content<br>Content<br></div><!--
--><div class="iB">Content<br>Content<br>Content<br>Content<br></div>

score 1 · Accepted Answer · answered May 14 '13 at 05:41

If you are generating the HTML dynamically, just comment out the white space between the inline divs when you are generating the code.

Demo

<div class="wrapper">
    <div class="iB">Content<br>Content<br>Content<br></div><!--
    --><div class="iB">Content<br>Content<br>Content<br>Content<br>Content<br>Content<br></div><!--
    --><div class="iB">Content<br>Content<br>Content<br></div><!--
    --><div class="iB">Content<br>Content<br>Content<br>Content<br></div><!--
    --><div class="iB">Content<br>Content<br>Content<br>Content<br></div><!--
    --><div class="iB">Content<br>Content<br>Content<br></div><!--
    --><div class="iB">Content<br>Content<br>Content<br>Content<br></div>
</div>

score 0 · Answer 3 · answered May 14 '13 at 05:25

0

Add font-size:0 to the parent element. Don't forget to define the font-size for child elements:

.wrapper {
   font-size: 0px;
}

.iB {
    font-size:15px;
}

Demo here

answered May 14 '13 at 05:25

Nikola K.

6,813
13
27
39

DACrosby · Answer 4 · 2013-05-14T05:40:20.350

I believe you're looking for margin-left:-4px;

.iB {
  display:inline-block;
  margin-left:-4px;
}

http://jsfiddle.net/daCrosby/zbbHc/128/

To remove the spacing on top, you have to either use JavaScript, or reformat your everything into columns. This has some drawbacks, but it is a JS-free solution.

HTML

<div id="hold">
    <div class="wrapper">
        <div class="iB">Content<br />Content<br />Content<br /></div>
    </div>
    <div class="wrapper">
        <div class="iB">Content<br />Content<br />Content<br /></div>
    </div>
    <div class="wrapper">
        <div class="iB">Content<br />Content<br />Content<br /></div>
    </div>
</div>

CSS

#hold{
     width:100%;   
}
.wrapper {
    float:left;
    width: 33%;
}

.iB {
    display:block;
}

http://jsfiddle.net/daCrosby/zbbHc/131/

inline block with pintrest like boards

4 Answers4

Demo