HTML - Columns ignore height

Question

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 this did not work, it showed only one column, even if the number of columns was more 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 many css classes here (grid1, grid2 ...), they usually do not need to be used, just set the height: auto so that it occupies the height necessary to display all the content.

A working example can be found here: http://cssdeck.com/labs/full/nuauntmo

Answer 2

Depending on what you are trying to achieve, you can place vertically stacked blocks in separate containers. Something like that:

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

Columns will wrap if there is not enough horizontal space, so the container should have a fixed width.

Answer 3

try adding vertical-align property to css.

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