[SOLVED] Aligning 4 Images Horizontally (CSS / HTML Question)
 

I've been toying with this for what feels like forever and have yet to figure it out. This isn't an Atahualpa question per se, but I know a lot of you are pretty familiar with HTML and CSS, so I figured it was worth a shot.

Here is the page I'm having problems with:
http://www.uphereinmytree.com/socialize/

I want the 4 images to appear in a horizontal line, space evenly apart. I've tried a bunch of different methods, but have yet to succeed.

Here is the HTML I'm using:
<div id="socialize" style="width:900px;">
<img id="facebookicon" src="http://uphereinmytree.com/wp-content/themes/atahualpa379/images/Facebook.png" alt="Facebook Icon" />
<img id="twittericon" src="http://uphereinmytree.com/wp-content/themes/atahualpa379/images/Twitter.png" alt="Twitter Icon" />
<img id="rssicon" src="http://uphereinmytree.com/wp-content/themes/atahualpa379/images/RSS.png" alt="RSS Icon" />
<img id="gmailicon" src="http://uphereinmytree.com/wp-content/themes/atahualpa379/images/Gmail.png" alt="Gmail Icon" />
</div>

Here's the CSS:
div#socialize img {
background-color: transparent;
display: block;
margin-left: auto;
margin-right: auto;
}

I've tried floating the images left, but they end up on a diagonal for some reason. Only the left most icon is in the proper position. Any help would be greatly appreciated.

try playing with 'float: left;'