Image gallery not lining up in a line

[jenyarubanova]

Hi everyone! I hope that you guys can help me. I have created an image gallery with four images and instead of lining up in a row they seem to line up in two and twos, like a table of two rows and two columns. I have looked at other questions regarding this topic and I seem to be doing everything suggested but still not luck.

Here is the HTML code:

<div class="img">
<a target="_blank" href="index.html"><img src="../images/jewelry photos/180 by 180/littlejewelry.jpg" alt="Klematis" width="180" height="180" /></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="index.html"><img src="../images/jewelry photos/180 by 180/littlejewelry.jpg" alt="Klematis" width="180" height="180" /></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="index.html"><img src="../images/jewelry photos/180 by 180/littlejewelry.jpg" alt="Klematis" width="180" height="180" /></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="index.html"><img src="../images/jewelry photos/180 by 180/littlejewelry.jpg" alt="Klematis" width="180" height="180" /></a>
<div class="desc">Add a description of the image here</div>
</div>

Now for the CSS code:

div.img
{
margin: 1px;
border: 1px solid #FFF;
height: auto;
width: auto;
float: left;
text-align: center;
top:450px;
position:relative;
right:400px;

}

div.img img
{
display:inline;
margin: 4px;
border: 2px solid #ffffff;
}
div.img a:hover img {border: 1px solid #F03;}

div.desc
{
text-align: center;
font-weight: normal;
width: 220px;
margin: 1px;
}

I cannot seem to post a preview as this site has not launched yet and not connected to the web and working in dreamweaver mode. But when you look at the page, the images do not line up straight but go in twos and twos even though there seems to be enough space. Am I missing something? Any help would be appreciated!

Jenya.

[alt131]

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]

[jenyarubanova]

Great, thats very clear! I will give your code a go and see if I can achieve this effect with a list!