[unsolved] Centering floating elements

Hi, first of all, the html tags don't work here. Use bbcode tags to create the clickable url's. Example: [ u r l = http:// etcetera, blah] this is a link description[/u r l ] There are spaces in that bbcode which should be removed for it to work correctly, but you should be able to figure it out.
Secondly, yes, I have downloaded the same Hoverbox code and the technique used depends on floating all the images inside the "box-frame". The Original was only 5 images wide, with the Box-frame being of a fixed width and is carefully crafted to accomodate the image sizes the author had in the example.
The float forces the left side of the image to the edge of the containing box. If you adjust the width of the box (as you appear to have done to get additional images on the line), the images re-adjust to fill the available space on the first line until there is not enough room to add another image, then the second line is filled in the same manner. You may be able to add some padding to the "box-frame" to give the centered appearance, which I think is what you are asking for, but simply tweeking the Box-frame width to include the correct number of images might be an easier solution. IMHO

*edit*
I have the Hoverbox code on another machine and will fire it up later to see if the padding possibility will work. And will post back here with the results.

Or you could have just looked at my code.

If you had you would have seen that the width changes fluidly.
But even if it didn't your suggestion wouldn't have worked. I tried it.

Okay, I was using the imageshack images as a reference. Didn't notice the link to the page there.

Have you tried adding padding-left to the Box-frame?

That does work, but the spacing I need to pad shifts fluidly.

If the objective is to centre the line of images inside the Hoverbox with a fluid width (images being a fixed or given width), my suggestion would be to write a script to calculate the padding required on the Hoverbox.
Otherwise, the floating of the line of images will leave the remaining space on the right hand side of the Hoverbox, which I think is what you are trying to avoid?

If the objective is to centre the line of images inside the Hoverbox with a fluid width (images being a fixed or given width), my suggestion would be to write a script to calculate the padding required on the Hoverbox.

So you don't know how to do it (with pure CSS anyways).
/me waits for a guru to log on because they always know everything. Right? Right?

I remain confident that there is a better solution to this problem </blind hope>

I think that guru is on a holiday...

Just pondering on this for a moment...

Question is: How many 6 inch cubes can you place inside a box of indeterminant size?

Answer: it depends on the size of the containing Box, right?

Therein lies the difficulty. That is most likely why the original Hoverbox is a fixed width. To fit a determined number of Images inside the fixed containing box.
As an alternative to fixing the size of the Hoverbox, could the Image size be tweeked by a script to determine the "best-fit" inside the Browser's known viewport size?

Just kinda thinking out loud...

Not tested.

Make the list items inline instead of float. Make ul {text-align: center;}. That should be a good start, though I'm sure there will be some details to work out. There always are, no?

cheers,

gary

That works as far as centering the content goes, however it introduces tons of new problems.

I have no idea how to work through those problems. If you could do it for me that would be superb.

Like what?

That's not happening. We'll help you solve your issues, but not do it for you.

cheers,

gary

Sorry about my previous tone.

The problems are kind of hard to describe, I don't really know enough about what the hell is going on to put them to you in words, but I'll post a sample page in a bit.

At least in mozzila inline doesn't look like it was designed to go with images.