Problems with css gallery

I use this

Here is the code for the image and caption

<div class="floatpics">
<a href="images/whatever.jpg" target="_blank"><img src="images/whatever.jpg" /></a><br />
<p>This is a pic of whatever</p>
</div>

Which I have in a container /box.

Here is the CSS I use

.floatpics {
float: left;
margin: 5px;
}
  
div.floatpics p {
text-align: left;
width: 150px;
height: 100px;
}
		   
div.floatpics img {
height: 70px;
width: 126px;
}

You can of course set the text or thumbnails to whatever you want. I am aslo a bit new a CSS so if anybody thinks that this could be made better, I would welcome input.

Regards
Day

Thanks very much for your reply daybreak. I tried out your tip, but i got the same problem. The thumbnails don't stay inside the red box.

It seems to recognise the left hand side of the box as the starting point, but instead of recognising the right hand side of the box as the point that the the thumbnail has to drop down to the next line; it uses the outer right of the page as it's reference.

i also need the thumbnails to be different sizes. do you think that this might be part of the problem? another guess on my part (prob completley wrong) is that it might be due to the box (.content) being relativley positioned. ahh well, guess i best keep experimenting.
cheers m8!

Blueguy does look like the thumbnails are not being contained by your box.

Now I think that is a bit strange, The red box being relatively positioned no longer has a container itself, but it should contain the thumnails, UNLESS they are also being relatively positioned , or so I believe.

The question is what container is holding them, and why not give it a red border or use a static box.

Good Luck
Day

This is the IE "escaping floats" bug, and thanks to a newly
invented trick, the "Holly hack", this can now be fixed.

The problem for IE is that the red bordered float container
has no stated dimension. either width or height. Given either
one, IE will behave. Since you probably want the design to
remain fluid, you could give the container a width in %, but
then that would preclude having a pixel-sized col or image
next to it.

The Holly hack is an easy-to-apply method that changes
nothing, but cures the bug. Use this css code on the red box:

/* hide from IE-mac \*/
* html .redbox {height: 1%;}
/* end hide for IE-mac */

The first and third lines are a comment hack that prevents IE/mac
from reading what is between them, since that browser doesn't
have this bug but will be messed up if it sees the inner hack.

That second line is the Tan hack, and selects .redbox when it
is contained anywhere within HTML, but ONLY if the HTML element
is contained within *any* element whatsoever. Y'see, IE browsers
think there is a "wrapper" that encloses HTML! No other browser
believes this, so they all ignore the Tan hack and its contents.

Thus this combo hack feeds that 'height: 1%' only to IE/win browsers.
You would think that small a height would be bad, but you would be
wrong, because IE/win always enlarges boxes to fit their content,
even when you tell it not to! So the box is not 1% high, but the
bug is fixed. Ain't that a cool hack?

The Holly hack can be used anywhere a dimension will fix an
IE bug (there's quite a few, mostly with floats).

If a new IE/win version stops expanding boxes but maintains
that mystery HTML wrapper, this hack will become dangerous,
but I'm not holding my breath.

Hey! thanks man! i appreciate the help. i'm going to go off & try your hack. i had almost given up & turned to jalbum for ready made code - i'll experiment & try to amalgamate code from that as well - see what happens. thanks again for your help

best regards
blueguy

here's what i got so far.

http://www.fluctuation.co.uk/Gallery/index.html

css:
http://www.fluctuation.co.uk/Gallery/res/styles.css

it isn't fluid - unfortuntely - i just couldn't get it to stick to 4 column 2 rows. i would ideally like it to be two by 4, whatever resolution it is viewed in. i.e -when it is in 800*600, 10248*768 or whatever, - it is 2 by 4. but if the window is increased or decreased - the thumbnails are fluid, dropping to the line below. i think i'm looking @ creating different stylesheets for resolutions to get this pipe dream working!
netscape is traumatising the whole arrangement too . if anyone has anymore suggestions, they would be greatly appreciated:)

Big John

Thank you did not know about the escaping floated boxes.

And thank you for the holly hack.

Just to ask I thought the * html hack was the Andrew Clover hack.

And Tantek uses the Voice Family hack?

Regards
Day

So just give the red box a pixel width. That will prevent both
the IE bug and also keep the gallery from changing width.

BTW, I see you have learned to keep all the floats
at the same height. That is the most critical thing
about floated galleries.

ha ha! i figured sod having them different sizes if it meant having the thumbnails in diff hemispheres

umm, i'm not sure if i follow you entirely about the 1px border. i would like the thumbnails to be fluid. however when expanded into the maximum for 1024*720, i would like it to stay in 4*2, hyowever this doesn't seem to happen - it just wraps round tp 6*2 or 5*3.

hope that makes sense. or maybe i didn't get what you meant

anyway - thanks again for all your tips.

Tantek was first, with the well known "escape" based
voice family hack, then Andrew clover "simplified" it,
and finally Edwardson Tan discovered the * html
method of feeding only to IE.

Tan produced a slew of interesting hiding hacks, BTW.

http://css-discuss.incutio.com/?page=BoxModelHack

That page is part of the css-d Wiki, a site packed tight
with extremely useful info on all css topics. I highly
recommend it.

The primary advantage of the Tan hack (aside from the
ease of use) is that only IE ever sees the rule at all, so
older browsers (Nav4) that might choke on an escape
in the css won't be harmed. Add in the fact that even
chimps can understand it and we got a winner, folks!

I seem to always have problems with the * html hack and moved back to using the voice hack, when height needs to be adjusted.

for example IE 6 does not seem to pick up height in the following

* html .class {width:40px; height:40px; w\idth:35px, h\eight:35}

My understanding was that height would work as well when any attributes starting with A-G would not. I hjave tried splitting the above as well but did not help, and only use this hack (nice and simple it is) when I do not have an issue with height.

Regards
Day

The thing about using an escape based hack is that
the escape must never directly preceed any of the
first six alphabetical characters: a, b, c, d, e, or f.

When that happens the browser assumes you are
escaping a hex code, the character is ignored, and
"h\eight" becomes "hight". Since hight is not a valid
property name it is ignored.

Just make it "he\ight" and no problem. With this hack
the escape is always inside the property name, not at
the beginning as with the earlier Clover hack, or IE5.x
might read and obey it.

ahha thanks Big John. It is so much simpler than the voice family hack.

Did not read it correctly

Day