Spacing in horizontally-aligned array of images

[Quetzal]

Hello

I have a 'test' site here:

http://www.proofreading4students.com/socialNet.html

that shows five images aligned horizontally and centered at the bottom of the page.

The HTML is as follows:


<div id="wrapper">


</div>
<div class="img">


<a target="_blank" href="newWindow.html"><img src="twitter.jpg" alt="Twitter" height="44" width="39"></a>
<a target="_blank" href="newWindow1.html"><img src="digg-button.jpg" alt="Digg" height="44" width="44"></a>
<a target="_blank" href="newWindow2.html"><img src="delicious1.jpg" alt="Delicious" height="44" width="44"></a>
<a target="_blank" href="newWindows3.html"><img src="face1.jpg" alt="Facebook" height="44" width="44"></a>
<a target="_blank" href="newWindows4.html"><img src="email-icon.jpg" alt="Email us!" height="44" width="43"></a>


</div>

and the external CSS looks like this:


html,body{
height:100%;
}


#wrapper{margin: 0 auto; height:100%; position:relative;margin-bottom: -50px;}

.img {
width:240px;
margin:0 auto;
}

a img {
border:none;
}

I would like to space the images out a little (but keep them horizontally aligned and centered at the bottom of the Web page).

How would I do that, please?

Thanks

[Nile]

Add


div.img img { margin: 5px; }

[ajfmrf]

I used an 1px image and spaced them out as 10px .

http://www.web-user.info/test/imgtest.html

That is one way it can be done

[Quetzal]

Hello Nile

Thanks for your reply.

Do you mean as in this:


#wrapper{margin: 0 auto; height:100%; position:relative;margin-bottom: -50px;}


.img {
width:240px;
margin:0 auto;
}

a img {
border:none;
}

div.img img { margin: 5px; }

When I do that, I only get four images aligned horizontally (the fifth image is positioned under the first image in the row above it).

Thanks

[Quetzal]

Hello Bud

How did you do that!?

Just what I wanted - many thanks.

[pvideos]

Promotional Videos (http://promotionalvideos.us)

[Quetzal]

Hello

I have actually tried this through my server

http://www.proofreading4students.com/socialNet.html

and in IE9 and Safari, I can see the four images aligned, but not the fifth one.

I must be doing something wrong :confused:

Thanks