alt131 - 1:19 am on Mar 2, 2012 (gmt 0)

Hi jenyarubanova and welcome to WebmasterWorld :),

I think there is something else in the code affecting this because I can't exactly reproduce your described layout here. However, one issue will be the relative positioning on the div.img. Recall that relative positioning works by shifting the element from the position it would have if it wasn't positioned. In this case, right:400px means pushing the div from the right so each div.img is drawn 400px more to the left of where it would otherwise be. In my case that results in the last image having a large blank space to the right, while the first image div has been pushed out of sight to the left.

The second issue is that what you are describing sounds like "float drop". If there is not enough width for a float to fit horizontally it will "drop" down the page until it can fit. So I wonder if the div.img's are in a container that has a width smaller than the total required for them all to fit horizontally.

This sort of layout should be quite easy to achieve. There are so many ways to do this and it also depends on what browser versions you are supporting. the following code is just one example to get you going and should work for a good range of versions. The advantage over the posted code is that you appear to have a list of images plus descriptions, so a list is more semantically correct and reduces the amount of HTML mark-up.

ul.img {list-style-type:none; margin:0; padding:0; } ul.img li {float:left; margin:1px; border: 1px solid #FFF; width: 220px; text-align:center; } ul.img img {margin:1px auto; border: 2px solid #ffffff; display:block;} <ul class="img"> <li><a href="index.html"><img src="images/image.jpg" alt="Klematis" width="180" height="180" /></a> Add a description of the image here</li> <li><a href="index.html"><img src="images/image.jpg" alt="Klematis" width="180" height="180" /></a> Add a description of the image here</li> <li><a href="index.html"><img src="images/image.jpg" alt="Klematis" width="180" height="180" /></a> Add a description of the image here</li> <li><a href="index.html"><img src="images/image.jpg" alt="Klematis" width="180" height="180" /></a> Add a description of the image here</li> </ul>

Edit reason
Correcting smile face

[edited by: alt131 at 1:59 am (utc) on Mar 2, 2012]