html - An element with more text pushes down other inline-block elements. Why? -


this super simple , i'm baffled behavior. want search results display in nice grid of blocks of 2 in row. instead shows crooked div more text pushes others down it's content. how can fix this?

here's simplified example shows problem in ff , 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 colonies; 1 or more meerkats stand sentry while others foraging or playing, warn them of approaching dangers ...         </div>         <div class='search_result'>             1 or more meerkats stand sentry         </div>         <div class='search_result'>             meerkats         </div>     </div> </body> </html> 

on .search_result, add vertical-align: top.

live demo


Comments

Popular posts from this blog

apache - Add omitted ? to URLs -

redirect - bbPress Forum - rewrite to wwww.mysite prohibits login -

php - How can I stop spam on my custom forum/blog? -