SuzyUK - 8:24 pm on Jul 5, 2011 (gmt 0)
@londrum, I'm not pointing my pistol ;)
@kickedout - 300px is not wide enough**,
display: inline-block is not the enemy, it is your friend in this case (glad it's working in IE now!) - most of the newer "like it" "friend it" "+ it" buttons will increasingly use it as it's the "new float" !
When I said vertically align - I meant by that that the buttons/images should be side by side but that because they are, or may be, different heights they should align on the center of their vertical axis too so we are on the same track..
The other thing about
display: inline-block; is that when using it it will leave about 4px (0.25em is possibly the more correct way to think of this as it's related to font-size and word-spacing) space between the elements.. coming back to this
I can't see the exact widths of all your elements in that
contain div but I have 3 of 4 I think
facebook iframe = 108px wide
twitter iframe = 110px wide
Myspace = not sure but lets say 20px wide like your image suggests
Google+ iframe = 90px wide
all those added together = 345px
now that's not exact as I can't see all the iframes, but I hope you get the idea (look at firebug, computed width, to find your exact measurements)
then with the 4px spacing between them which inline-block adds say another 12px you are looking at needing a 340-350px** wide container
you can of course try some code to reduce the whitespacing between inline elements.. I find
margin-left: -0.25em works quite well although it has to be hidden from IE7 and below.
or you can try a table as suggested by londrum, but you may still have different spacing issues even within it, though maybe not :)