Task: arrange the div in the string. When specifying

.content { display: inline-block; }

The blocks are pressed to the lower border of the parent, but it is necessary so that to the top.

cssdesk.com example

Found a way out: put the parent

 .container { display: table;}

and children:

 .content {display: table-cell;}

but I think there are more elegant solutions

    3 answers 3

    For div.cont you need to add the vertical-align: top; property vertical-align: top; .

    Example: http://cssdesk.com/9RyKU

    • Thanks, that is necessary! - atom-22

    Did that mean?

     div.cont { display: inline-block; background: #fff; width: 80px; text-align: center; vertical-align:top; }
    • while saving and copying the link, ahead of them a bit)) - Pavel Azanov

    You can do it like this

      body { font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 10px; font-size: 13px; } div.container { background-color: #ccc; overflow: hidden; } div.cont { background: #fff; width: 80px; text-align: center; float: left; margin-left: 5px; } div.cont:first-child { margin-left: 0; }

    http://jsfiddle.net/e6WE6/3/

    • A good solution if you need support up to version 7, plus. - Pavel Azanov