Multi-Column like CSS layout - html

Question

I'm looking to render a multi-column CSS layout like the one pictured in the link below.
http://i.imgur.com/Fhdyi.png
Here's the kind of syntax I'm looking for...
<div class="container">
<div id="1">#1</div>
<div id="2">#2</div>
<div id="3">#3</div>
<!-- and so on... -->
</div>
What kind of CSS properties am I looking to apply to these numbered DIVs to get them displaying like this? Height of DIVs is variable but width is fixed.
Many Thanks!

Answer 1

How about separating divs in columns? Something like this:
.container #col1,#col2,#col3,#col4{
float:left;
}
.container #div1,#div2,#div3,#div4,#div5,#div6,#div7{
width:150px;
background:#000;
margin:0 20px 10px 0;
padding:10px;
color:#fff;
}
<div class="container">
<div id="col1">
<div id="div1">#1</div>
<div id="div2">#2</div>
</div>
<div id="col2">
<div id="div3">#3</div>
</div>
<div id="col3">
<div id="div4">#4</div>
<div id="div5">#5</div>
<div id="div6">#6</div>
</div>
<div id="col4">
<div id="div7">#7</div>
</div>
</div>

Answer 2

It can't be done well with just CSS, and only with CSS3.
To answer your question as posted, this is an example: http://sickdesigner.com/masonry-css-getting-awesome-with-css3/
div{
-moz-column-count: 3;
-moz-column-gap: 10px;
-webkit-column-count: 3;
-webkit-column-gap: 10px;
column-count: 3;
column-gap: 10px;
width: 480px; }
div a{
display: inline-block; /* Display inline-block, and absolutely NO FLOATS! */
margin-bottom: 20px;
width: 100%; }
<div>
Whatever stuff you want to put in here.
Whatever stuff you want to put in here.
Whatever stuff you want to put in here.
...and so on and so forth ad nauseum.
</div>
The issue with that is that if you have a lot of items, you'll see the first of each column at the top instead of the first three items.
The jQuery masonry plugin is a much better option for this kind of layout: http://masonry.desandro.com/
There's also a plain JS version, called "vanilla masonry"
http://vanilla-masonry.desandro.com/
That way your first items are on the top, it looks better in order.

Answer 3

This is not tested but could it be something like this you are looking for:
#1{
height:150px;
width:200px;
border: 1px, solid, black;
background-color:black;
color:white;
float:left;
}
#2{
height:200px;
width:200px;
border: 1px, solid, black;
background-color:black;
color:white;
float:left;
}
#3{
height:500px;
width:200px;
border: 1px, solid, black;
background-color:black;
color:white;
clear:both;
}
#4{
height:50px;
width:200px;
border: 1px, solid, black;
background-color:black;
color:white;
float:left;
}
#5{
height:100px;
width:200px;
border: 1px, solid, black;
background-color:black;
color:white;
float:left;
}
#6{
height:200px;
width:200px;
border: 1px, solid, black;
background-color:black;
color:white;
float:left;
}
#7{
height:500px;
width:200px;
border: 1px, solid, black;
background-color:black;
color:white;
clear:left;
}