Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

html

css

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>
like image 333
Bijou Trouvaille Avatar asked Feb 18 '11 15:02

Bijou Trouvaille


1 Answers

On .search_result, add vertical-align: top.

Live Demo

like image 72
thirtydot Avatar answered Nov 15 '22 06:11

thirtydot