Display-inline block and image - html

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;
}

Answer 2

If your blocks are fixed width, why not float them instead and put them in a parent container with a total width and centered using margin: 0 auto

Answer 3

The div element is a block element. The img element is an inline-block element; it has the main features of a inline element (except that it has the block element features of height and width). Therefore, I see two main problems with your code. Firstly, your image is somehow meant to replace the same unit of space as where you as simultaneously displaying the word "main" which can cause a conflict with spacing/display. [I recommend deleting the word "main" from your HTML.] Secondly, you don't specify the height and/or width of the image, which is not really a problem since you have overflow value set to hidden, but still generally you should have a height and/or width value assigned (make them less than the parent container's height and width) as it will make the browsers rendering/displaying more universal/compatible cross-browsers. Implementing a combination of those two things [or of changing your display value to inline-table (which it kind of seems more like what you want since your display seems "tablular")] SHOULD fix your problem. If it doesn't, I would recommend changing your margin value to 0 auto (which will have the effect of centering your image in the middle of your div/parent container), because I have a lingering suspicion that your margin values may also be at play (but only if the other two suggestions don't work). Good luck!
PS: Remember that just because you have overflow: hidden doesn't mean that the browser doesn't "see" the element(s) that are overflowing. Remember the Box Model.

Answer 4

Try this -
<div class="main" id="main">
<div class="block">main
<img src="style/images/try.png">
</div>
</div>
<div id="main">
<div class="block">main</div>
</div>
<div id="main">
<div class="block">main</div>
</div>
<div id="main">
<div class="block">main</div>
</div>
<div id="main">
<div class="block">main</div>
</div>
And instead of #main .block{ just .main {