problem aligning thumbnails in DIV

[Craigj1303]

Hi All

Please help with this problem , it's driving me crazy!! Hopefully someone can look at my HTML or CSS and tell me what i'm doing wrong.

Check this link:
http://uk.geocities.com/johnson463@b...stcountry.html

All I want is to align 3 thumbnails across the main middle container DIV and have that structure repeat until the bottom of the document. However, this seems to start ok with the first 3 images but the next row shows 1 image only, aligned right? The 3rd row then looks ok but the 4th row has only 1 image and so on. each thumbnail is in its own DIV within the middle container div.

I have tried lots of toying with the width and alignments of the middlecontainer DIV and the nested DIV within , all to no avail.

Heeellllllp!

Thanks, Craig

[Lchad]

Have you tried reducing the left and right margins of the div class "mainleft"?
My guess is that all of them side by side are just a little too wide to fit in the main container box..
Try... 30px on each instead of 40px. See if that bumps them all up.

[Craigj1303]

Yes, tried that. The middlecontainer div is 700px wide. The mainleft div with the 3 thumbnails and 40px margin left and right equates to 690px so it does fit in.

I just experimented with adding the

HTML: Select all

height="100"

attribute to every thumbnail in the HTML. That worked all apart from the very first pic which is kinda aligned right (ish) on it's own now!

Oh, just checked in Firefox and it looks ok in that! Seems to be IE that displays the first thumbnail aligned strangely.

[Lchad]

Did you upload the latest because it's still messed up like it was earlier...

[Craigj1303]

I uploaded the latest version now.

I resolved the problem by increasing the height of the div above the thumbnails ("#right") by 5px. I'm not sure why it worked but it did!

I do have one minor cosmetic difference with this site when opened in Firefox & IE. In IE there is a small gap between the header image and the navbar below. In this gap, which is only around 1-2px, you can see the background image. However, in Firefox this gap is not apparent.

This is my first website so I wanted to do it right using CSS for layout. Can you see if there's anything obvious i've done incorrectly in relation to the CSS or HTML before I carry on much further?

[Craigj1303]

Well I thought i'd solved it last night but apparently I am wrong. I tested the gallery page at home in Firefox 2 and IE7 and the 3 thumbnails lined up across the page just fine. I get to work today and have a look at the page in IE6 and low & behold.....this browser only displays 2 thumbnails next to each other and then puts the next 2 underneath.

It's like the 3 thumbnails in the nested DIV's don't fit in to the #gallerycontainer DIV but I don't see why not if it renders OK in IE7 & Firefox? I even experimented with widening the #gallerycontainer DIV by 50px and then the 3 thumbnails display but I want to keep the width 700px to keep in sync with the rest of the page.

My calculations are that the #gallerycontainer DIV is 702px wide (700px wide & 1px border each side).

The mainleft DIV's are 150px wide with a 41px margin left and right which to my mind calculates at 696px wide in total. So shouldn't that fit in the container??

I can reduce the margins left and right which makes it work in IE6 as well but then the thumbnails don't look centred in other browsers, it's like a vicious circle!

Here is the latest link:
http://uk.geocities.com/johnson463@b...stcountry.html

If you have the facility to check in IE6 & IE7 or Firefox you should see what I mean.

[Lchad]

What I do in this situation is use <p></p> tags instead of div classes to hold all my photos.

Code: Select all

<div class="gallery">
<p> image with css applied to each image; another image, amother image </p>
<p>row two of images with css applied to each image</p></div>

css

Code: Select all

.image {
float: left
width: 150px;
margin-right 30px;
}

That's a thrown together version but maybe that will help you.

[moojoo]

You can use a method similar to http://www.newguyinennis.com/photography as well.

Code: Select all

.thumbnail {
width:168px;
height:126px;
overflow:hidden;
float:left;
margin:6px 3px 6px 6px;
}

Code: Select all

<div class="thumbnail">
<img src="" width="" height="" alt="" />
</div>