display: inline-block
style is designed for something else, here's an example of what it's been designed for (inline
is a separate dispay mode, so I'd recommend to rename you class to inline-block
regardless of which way you're gonna proceed with - for now I used your namings):
Create this with 100 cells:
<div class='block'>
<div class="inline" style='width: 50px; height: 50px;'>1</div>
<div class="inline" style='width: 50px; height: 50px;'>2</div>
<div class="inline" style='width: 50px; height: 50px;'>3</div>
..
<div class="inline" style='width: 50px; height: 50px;'>100</div>
</div>
then resize the window and watch how boxes get layout.
What you need is a table, either a regular one:
<table>
<tr>
<td>
<div>First Col Content</div>
</td>
<td>
<div>Second Col Content</div>
</td>
<td>
<div>Third Col Content</div>
</td>
</tr>
</table>
or a CSS one:
<div style='display: table;'>
<div style='display: table-row;'>
<div style='display: table-cell; width: 33%; min-width: 33%;'>
<div>First Col Content</div>
</div >
<div style='display: table-cell; width: 33%; min-width: 33%;'>
<div>Second Col Content</div>
</div >
<div style='display: table-cell; width: 34%; min-width: 34%;'>
<div>Third Col Content</div>
</div>
</div>
</div>