http://lifetimeimage.co.uk/test/wedding.html

 

As you can see from the link above, the footer is sitting underneath everything, the thumbnails are under the main picture, and the main picture is below the thumbnails.

 

I want the footer to be at the bottom funny enough, I then want the thumbnails to be above the footer, and then the main image to be above the thumbnails.

 

Any help given is extremely appreciated!!

You need to clear the float before the footer.

 

put this in your css file:

 

.clear {
   float: none;
   clear: both;
}

 

then put this before the footer:

<div class="clear"></div>

 

it might need to go before the break div - I don't know without trying....either way this should be the fix.

Tried that already unfortunatly and it didnt work

Anyone?

At the moment I can only see a way of this working if all your images are the same height

Ignore the image sizes at the moment, they will all be the same height.

You've got a mix of floats and absolute positioning which means the elements are taken out of the natural flow of the document. You have a few choices, this is what I would personally do. Either have everything absolute positioned or float everything. I'm not a big fan of absolute positioning but as it stands you could add a margin to the top of the thumbnail list and the footer to get them to the bottom. This would rely on all the main images being the same size.