Dynamic div and image placement

[MKenyon]

I have a page that is going to group images. I have two divs, one showing all the images, and one that's empty (on the left). Also, on the left, I have a drop down that allows the user to select which group the imaage will be added to.

I alread have code that allows the user to click the image on the right, and it appears in the left. The way I do this is load all the images in both divs, but in the left div, they are initially hidden. (Visibility=hidden)

The javascript unhides them as they are clicked on the right hand side.

My problem is, the div starts out very large and empty, because it is retaining space for all the images. Also, if the user clicks an image half-way through the list, it appears half-way down the left div.

I would like the size of the div to be dynamic, so that it starts small, and grows as images are added.

[Bernard Marx]

Start off by using display: none; instead. 'hidden' images will be taken out of the document flow.

[MKenyon]

Can you be a little more specific? You mean the Image should be display: none? And, VISIBILITY: hidden seems to leave it in the flow, because even though you can't see them, the div is streched for them.

[Bernard Marx]

Yes, sir. You've answered it yourself.

[w3.org...]
[w3.org...]