This is super simple and I’m completely baffled by this behavior. I want my search results to display in a nice grid of blocks of 2 in a row. But instead it shows up crooked where the div with more text pushes others down with it’s content. How can I fix this?
Here’s a simplified example that shows the problem in FF and Chrome:
<html>
<body>
<style>
.search_result
{
border: thin solid;
width: 250px;
height:200px;
display: inline-block;
}
</style>
<div style='width:508px'>
<div class='search_result'>
Meerkats demonstrate altruistic behavior within their colonies; one or more meerkats stand sentry while others are foraging or playing, to warn them of approaching dangers ...
</div>
<div class='search_result'>
one or more meerkats stand sentry
</div>
<div class='search_result'>
meerkats
</div>
</div>
</body>
</html>
On
.search_result, addvertical-align: top.Live Demo