CSS Aligning Buttons

Why would the top two rows of my sit开发者_运维技巧e load like this and the bottom row perfect?

Bottom Row:

HTML:

https://gist.github.com/1228291

CSS:

https://gist.github.com/1228301

---

It really depends on how you want to achieve vertical alignment. For instance, you could try something like:

.product-grid .name { height: 40px; }

But this would give you some whitespace between the title and price when the title is only one line.

---

It looks to me like it's off because the "cells" in the top row have item names that span two lines (thus pushing your buttons down for those items). With the "cells" on the bottom, the images above appear to make them wide enough that the item names fit, if this wasn't the case, that row would also suffer the same problem. You could try setting the names to have a specific height (as @brianreavis suggested) or perhaps adding non-breaking spaces ( ) instead of regular spaces) to the names would force the name div to push out the side.

---

On a side note, you don't have to use two ID's in a CSS selector (unless you're doing it for specificity reasons). Since the IDs are unique to the whole document, simply calling #welcome instead of #header #welcome should be sufficient.

---

Because your product titles have different number of lines.

Maybe this structure can inspire you: http://jsfiddle.net/JeaffreyGilbert/EW6Ax/