Display-inline block and image

Question

I am new in designing and so have some problems...

I need 3 block to be inline and centered, so I tried:

#main .block{
    display: inline-block;
    border: 1px solid #ECEDE8;
    margin: 10px 10px;
    overflow: hidden;
    height: 265px;
    width: 265px;
}

But, when i add an image in to the block, all others goes down.

P.S.

As I see, this problem is in safari, in Firefox all ok.

P.S.S

<div id="main">
<div class="block">main
<img src="style/images/try.png">
</div>
<div class="block">main</div>
<div class="block">main</div>
<div class="block">main</div>
<div class="block">main</div>
<div class="block">main</div>
</div>

P.S.S.S

As I could figure it out thought Google, all problem is in display: inline-block, in safari works display: inline-table. What solution could be?

Answer 1

You need to set the vertical align property. In this case best option would probably be:

vertical-align: top

So your css should be:

#main .block{
    display: inline-block;
    border: 1px solid #ECEDE8;
    margin: 10px 10px;
    overflow: hidden;
    height: 265px;
    width: 265px;
    vertical-align: top;
}