Aligning social media icons on a page (Was:Need Div help, please.)

Question

Hello,
I'm trying to figure out the best way to get the social media icons on the right side in a row, side by side, no space between.
Can I use a div?
Problem is now is that depending on monitor/screen size, the spacing changes.
Again, I want to have them all together with no spacing, centered on the right at all times.
http://www.saintleo.edu/SocialMediaSliders/Kathryn-JK.html
Any help would be greatly appreciated.
Kind regards,
JK

Answer 1

Yes, I took a look at the website. I saw that they were sliders.
It's hard for me to answer if putting an unordered list will hurt your code. The code that you have is not indented so it's extremely hard to read.
I would try putting the image in the <li> first. Make a backup of the page if you're nervous, and work on the backup. So your current content is live, and your backup can be toyed with until you have it right.
Also:
If using an unordered list scares you, there is an alternative which may work. I will use #twitter_right img as an example.
You are using absolute positioning. There is no reason to do this and I'm under the impression that absolute positioning should be avoided.
Your current CSS Rules for this are as follows:
#twitter_right img {
     left: -52px;
     position:absolute;
     top: 45px;
Instead, it should be:
#twitter_right img {
     float:right;
     margin-top:45px;
Now, if you wanted to get fancy you could do this: (The CSS Identifiers are not accurate... just showing you an exmple)
#twitter_right img, #facebook_right img, #youtube_right img {
     float:right;
     margin-bottom:45px;  -- this is could also be padding. Set this value to the height of the image if you don't want spacing.
That way, when the slider moves out, the icon will move with it. Additionally, the spacing would be equal across the board.