inline block with pintrest like boards

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

http://jsfiddle.net/zbbHc/127/

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;
 }

Answers


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>

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>

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


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/


Need Your Help

Duplicate Group Box

c# visual-studio-2008

How can I Duplicate a Groupbox in C# window application ,

tableview datasource goes empty after scrolling

iphone ios objective-c uitableview

I have a tableview that I create in code. In my .h I have declare the following properties. and also synthesized them.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.