Make inline div fill vertical space - html

Question

I have a webpage generated by a php script which reads text files stored on the server and presents the results in a form of columns which are divs with the following css properties:
width:auto;
min-width:500px;
display:inline-block;
vertical-align:top;
height:auto;
margin:.5%
The best thing about this design is that if there's enough horizontal space the user will see two or sometimes even three or more columns on the screen while at the same time if the user's device is very narrow the columns will rearrange themselves so that each column takes 100% of the available width (this is of course achieved with the use of media queries).
However there is one problem with this design: the amount of content in each column is not constant across all columns therefore if there are two or more columns displayed in one line then any column in that line shorter than the tallest column in the line will have empty space directly below it even if there are other columns below it.
Example of the problem: http://jsfiddle.net/zyrv30a6/
So I am wondering if it is possible to retain the advantages of the above design and make the columns fill the available vertical space above them.
I thought I could solve this problem by creating two super columns which would contain the individual columns however this solution would create several problems: users with wide screens would be forced to view two columns per line, while at the same time to preserve the single column view for the mobile devices the old design would have to be kept around which would double the size of the HTML code.
I should also mention that the ordering of the columns from left to right and top to bottom is important and can't be sacrificed to solve this problem.

Answer 1

Does adding
float: left
to the column class solve this?

Answer 2

This one was fun to work with. Thanks for asking this question. I can't fathom any way to do that with pure css. But I came up with a jquery solution, if you're interested:
$(document).ready(function() {
var oneColumnDisplayed = $('.column').first().offset().left === $('.column').eq(1).offset().left;
var twoColumnsDisplayed = $('.column').eq(1).offset().left > $('.column').eq(2).offset().left;
var threeColumnsDisplayed = !oneColumnDisplayed && !twoColumnsDisplayed; // assumes that three is the absolute maximum amount of columns.
var colWidth = 250; // change depending on the expected width of all columns
$('.column').each(function(index, column) {
// If the display is two columns wide and this one is not in the top row.
if (twoColumnsDisplayed && index > 1)
{
// set this column just below the column above it.
var columnAbove = $('.column').eq(index - 2);
var colAboveHeight = $(columnAbove).outerHeight();
var colAboveBottom = $(columnAbove).offset().top + colAboveHeight;
var diff = $(column).offset().top - colAboveBottom - 10; // 10 assuming a margin of 5px on each side of the columns
$(column).css('top', '-' + diff + 'px');
}
// If the display is three columns wide and this one is not in the top row.
if (threeColumnsDisplayed && index > 2)
{
// set this column just below the column above it.
var columnAbove = $('.column').eq(index - 3);
var colAboveHeight = $(columnAbove).outerHeight();
var colAboveBottom = $(columnAbove).offset().top + colAboveHeight;
var diff = $(column).offset().top - colAboveBottom - 10; // 10 assuming a margin of 5px on each side of the columns
$(column).css('top', '-' + diff + 'px');
}
});
});
I also had to add position: relative to the .column class and changed the margin to 5px. Here's a fiddle.
NOTE: In all practicality, you would probably want to throw this into a function and make sure it gets called on window resize as well, otherwise everything goes crazy when you resize the browser.