css float (image gallery) question

[sjoerd@kulsdom.com]

question about the css float function:

attempt to make a simple image gallery with expanding images on thumbnail click: http://www.kulsdom.com/newstoday/images/

my problem is this. the layout now looks like:
example 1 - http://www.kulsdom.com/newstoday/images/layout_now.jpg

and i want it to be like this:
example 2 - http://www.kulsdom.com/newstoday/ima...out_wanted.jpg

so, without all the gaps showing in example 1.

can that easily be done with another use of the float function? or does it need a javascript function?

thanks!

[jscheuer1]

Instead of having your images expand in place, you could use a script like:

Image Thumbnail Viewer II

and either use a table to put the large image area (in the script the 'dynloadarea') in the center cell of a 3 column row with the small images split between the left and right cells, or float some images to its left and some to its right.

The thing with float is that, given fixed width elements (like images), they will float to the edge of the container if pushed there by the other content that they are floating around. If that content is also fixed width and if that container is the body, then the window width will determine if the image needs to wrap to the next line or not. If you use a container division, then you can give it enough width to prevent wrapping but, on smaller screens/in smaller windows it will cause a horizontal scrollbar. The same is basically true with a table, it will assume the width required for its content and if that is greater than the window's or container's width, a horizontal scrollbar will appear or the content may bleed and wrap. So, in general, with images and especially with dynamically resizing ones, it is best to keep things small enough so that they will fit horizontally on an 800x600 screen. Your page can be wider but, the extra width should be accounted for using elements (usually text) that can wrap without causing the layout to look bad.