DIV's overspilling container DIV in Firefox

[Craigj1303]

Hi all

I am presenting thumbnails within a container DIV. The container has no height attribute in the CSS file. I am working on 3 different pages of thumbnails all with different numbers of thumbnails within.

In IE the height of the container DIV increases and decreases depending on how many thumbnails are within it. However, in Firefox the thumbnails "overspill" outside of the container DIV unless I specify a height attribute in the CSS to make it high enough. Obviously I don't want to do this because every page needs to be a different height.

Is there anything I can put in the CSS to make Firefox adjust the height of the container DIV depend on how many thumbs there are like IE does?

This is the CSS I have:

HTML: Select all

#gallerycontainer {
 width: 700px;
 margin: 0 auto;
 background: #EFE6C5;
 text-align: center;
 border: solid black 1px;
 }
 
.galleryimg {
 border: solid 1px #330000;
 border-width: 3px;
 }
 
div.mainleft{
 float: left;
 width: 232px;
 height: 180px;
 margin-top: 30px;
 }

Also, here is a link to the gallerys. Essex, Wales, West Country and Misc all have different number of images.

http://uk.geocities.com/johnson463@b...m/gallery.html

[daygon]

A. A link would be nice.
B. in your #gallerycontainer, you neet to put overflow:visiable.

Try that and i should work

[Craigj1303]

I tried adding the "overflow: visible" to the gallery container but it didn't work. There is a link available at the bottom of my original post. If you look in Firefox it seems to mess up the whole layout whereas IE displays everything fine?

[Lchad]

Usually overflow:hidden;
works.

[Craigj1303]

Neither "overflow: visible" or "overflow: hidden" worked but someone suggested using a spacer DIV between the thumbnail DIV and the container DIV which worked a treat!