Image positioning

[Ulterior]

Can't seem to get this image to position with a hyperlink, every time I position either relative, absolute or fixed, it positions right but then removes the link. <a href="#"><img src="images/template.png" class="img3" alt="our img" style="border: 1px solid #000101; position: relative; top: 0px; right: -192px; WIDTH:205px; HEIGHT:154px" > </a> .img3 {margin-top: 10px;z-index:-1;} Overall I'm trying to position 9 images equally spaced on the page, 3 then 3 then 3. Is there a better way of doing this?

[Ingolme]

Put each one in a container that's 33% wide. Make sure that the parent element does not have any padding.

.image {    float: left;	width: 33%;	text-align: center;}

<div class="image"><a href=""><img></a></div><div class="image"><a href=""><img></a></div><div class="image"><a href=""><img></a></div> <div class="image"><a href=""><img></a></div><div class="image"><a href=""><img></a></div><div class="image"><a href=""><img></a></div> <div class="image"><a href=""><img></a></div><div class="image"><a href=""><img></a></div><div class="image"><a href=""><img></a></div>

[Ulterior]

Haven't managed to get that working either, it seems to be to do with the z index set at -1, which is there so that the image doesn't show over the top of the navigation drop down menu, how can I get around it?

[Ingolme]

The problem here is the absolute positioning. You shouldn't need it. Positioning is a bad way to code website layouts.The code I gave you, if there is no other CSS conflicting with it (including positioning) will put the images equally spaced with three in each row. I forgot to add "float: left" in my previous post, I've updated to post so you can go back and try the updated code.

[Ulterior]

...

[Ulterior]

Feel free to delete these 2 posts, sorry.