HTML - Columns ignore height - html

Question

Right now I have this:
But I need something like this:
HTML
<div id="content">
<div class="block" style="height:600px;">
</div>
<div class="block" style="height:500px;">
</div>
<div class="block" style="height:500px;">
</div>
...
</div>
CSS
.block
{
width:350px;
background-color:white;
border-radius:5px;
margin-right:80px;
margin-bottom:80px;
display:inline-block;
}
#content
{
position:relative;
display:inline;
overflow:auto;
}
I tried using columns but that didn't work well, it showed one column only even though the column count was higher than 1.

Answer 1

Here is my solution:
HTML:
<div class="grid-container">
<div class="third">
<div class="grid grid1">
<p>Grid 1</p>
</div>
<div class="grid grid2">
<p>Grid 2</p>
</div>
</div>
<div class="third">
<div class="grid grid3">
<p>Grid 3</p>
</div>
<div class="grid grid4">
<p>Grid 4</p>
</div>
</div>
<div class="third">
<div class="grid grid5">
<p>Grid 5</p>
</div>
<div class="grid grid6">
<p>Grid 6</p>
</div>
</div>
</div>
CSS:
.grid-container {
width: 100%;
text-align: center;
margin-top: 15px;
}
.third {
display: inline-table;
width: 30%;
}
.grid {
border: 1px solid black;
margin: 10px 0;
}
.grid1 {
height: 200px;
}
.grid2 {
height: 100px;
}
.grid3 {
height: 100px;
}
.grid4 {
height: 350px;
}
.grid5 {
height: 200px;
}
.grid6 {
height: 200px;
}
Now i have used lots of css classes here (grid1, grid2 ...), they normally dont have to be used, just set height: auto so it takes the height needed to show all content.
Working example can be found here:
http://cssdeck.com/labs/full/nuauntmo

Answer 2

Depending on what you are trying to achieve, you could put the vertically stacked blocks in separate containers. Something like this:
HTML:
<div id="content">
<div class="col">
<div class="block" style="height:600px;">
</div>
<div class="block" style="height:500px;">
</div>
</div>
<div class="col">
<div class="block" style="height:500px;">
</div>
<div class="block" style="height:500px;">
</div>
</div>
...
CSS:
.col {
display: inline-block;
margin-right:80px;
vertical-align: top;
}
.block {
width:350px;
background-color:#ccc;
border-radius:5px;
margin-bottom:80px;
display:block;
vertical-align: top;
}
#content {
position:relative;
display:inline;
overflow:auto;
}
The columns will wrap if there is not enough horizontal space though, so the container would have to have a fixed width.

Answer 3

try adding vertical-align property in css.
.block
{
width:350px;
background-color:grey;
border-radius:5px;
margin-right:80px;
margin-bottom:80px;
display:inline-block;
vertical-align: top;
}