why is box not aligned properly?

<div class="productcontainer">
<div class="product"><img src="products/p1.jpg" height="75" /><br />Item 1</div>
<div class="product"><img src="products/p1.jpg" height="75" /><br />Item 2</div>
<div class="product"><img src="products/p1.j开发者_如何学Gopg" height="75" /><br />Item 3<br />Test</div>
<div class="product"><img src="products/p1.jpg" height="75" /><br />Item 4</div>
<div class="product"><img src="products/p1.jpg" height="75" /><br />Item 5</div>
</div>

.productcontainer { width: 320px }
.product { width: 100px; height: 100px; display: inline-block; border: solid 1px #000000 }

Why is Item 3 not aligned at the top?

You need to add vertical-align: top to .product.

For further information, see:

• http://www.brunildo.org/test/inline-block.html
• http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

Use float:left instead of display:inline-block Here's how it looks like with float:left: http://jsfiddle.net/techappetite/H7LfR/