I need to space some images that need to be on the same line, I'll give an example. Right now they are being space using &nbsp but I'm sure there is a more efficient way of doing it, right?

 

Example

 

Thanks in advance!

Edited December 17, 201015 yr by MikeP

This is what you have now:-

<p>                                               <a href="uk-virtual-servers.html" title="United Kingdom"><img src="images/uk-flag.png" width="120" height="120" alt="United Kingdom" /></a>                       <a href="usa-virtual-servers.html" title="United States of America"><img src="images/us-flag.png" width="120" height="120" alt="United States of America" /></a></p>

which as you say uses a lot of   because img is an inline element and cannot use side padding or side margin, so make them block elements with side margins and float: left:-

<p>
<a class="image" href="uk-virtual-servers.html" title="United Kingdom"><img src="images/uk-flag.png" width="120" height="120" alt="United Kingdom" /></a>
<a class="image" href="usa-virtual-servers.html" title="United States of America"><img src="images/us-flag.png" width="120" height="120" alt="United States of America" /></a>
</p>

CSS:-

.image { display: block; float: left; width: 120px; height: 120px; margin: 0 50px; }

I hope that works.

Edited December 17, 201015 yr by Wickham

It put the USA flag underneath the UK flag...

I added float: left; after you looked at my post, Sorry, last minute edit when I realised!

OK, adding the float left that you added in worked but now their not where they were. Slightly more left. I'm wanting them to be centered underneath the text above them also the same dimensions between then and the edges... If that makes sense.

There are probably several ways to center them. I haven't looked to see how wide your containing div is but you could add a style top the p tag with a width sufficient for the images and margins and also margin: 0 auto which will center the p tag. Assuming that my margins of 50px are OK, the total width of the p tag would be 120*2 + 50*4 = 440px.

<p id="images">
<a class="image" href="uk-virtual-servers.html" title="United Kingdom"><img src="images/uk-flag.png" width="120" height="120" alt="United Kingdom" /></a>
<a class="image" href="usa-virtual-servers.html" title="United States of America"><img src="images/us-flag.png" width="120" height="120" alt="United States of America" /></a>
</p>

 

#images { width: 440px; margin: 0 auto; overflow: hidden; }
.image { display: block; float: left; width: 120px; height: 120px; margin: 0 50px; }

 

Overflow: hidden is to create a height for the p tag and stop lower elements coming up over them. I think that works but there will be other ways.

Thanks! That worked a treat!