reapply css with javascript

[jzwill]

I need to know if this is possible. My page displays at first with no images. I need to know if I can "refresh" the all of css once all of the images have been displayed on the page. In particular the width/height of some div sections need to be updated to accomodate the loaded images. I cannot make the height/width static because the image sizes may vary and I want the dimentions based on the size of the image. Is this possible? Any help is appreciated.

Thanks.

[Fang]

It sounds as if you have a fix width div. It will expand to fit the images if no width is specified.

[jzwill]

Actually, I found the problem but I still need some help. Below is some sample html: (It now looks like this is not a Javascript question, but a CSS question, however I dont know how to move it).

</html>
<link rel="stylesheet" type="text/css" href="test.css" />

<div id="main">
<div id="contents">
<div id="realcontent">
<div id="thumbnails" class='thumbs'>
<table>
<tr>
<td><img src='thumbs/2005/20050601/tn_20050601_023.jpg'></td>
<td><img src='thumbs/2005/20050601/tn_20050601_023.jpg'></td>
<td><img src='thumbs/2005/20050601/tn_20050601_023.jpg'></td>
<td><img src='thumbs/2005/20050601/tn_20050601_023.jpg'></td>
<tr>
<td><img src='thumbs/2005/20050601/tn_20050601_023.jpg'></td>
<td><img src='thumbs/2005/20050601/tn_20050601_023.jpg'></td>
<td><img src='thumbs/2005/20050601/tn_20050601_023.jpg'></td>
<td><img src='thumbs/2005/20050601/tn_20050601_023.jpg'></td>
<tr>
<td><img src='thumbs/2005/20050601/tn_20050601_023.jpg'></td>
<td><img src='thumbs/2005/20050601/tn_20050601_023.jpg'></td>
<td><img src='thumbs/2005/20050601/tn_20050601_023.jpg'></td>
<td><img src='thumbs/2005/20050601/tn_20050601_023.jpg'></td>
<tr>
<td><img src='thumbs/2005/20050601/tn_20050601_023.jpg'></td>
<td><img src='thumbs/2005/20050601/tn_20050601_023.jpg'></td>
<td><img src='thumbs/2005/20050601/tn_20050601_023.jpg'></td>
<td><img src='thumbs/2005/20050601/tn_20050601_023.jpg'></td>
</table>
</div>
</div>
</div>

</div>
</html>

and here is the css file:
#main {
border: 1px solid #666;
background: #FFF3B3;
padding-top: 2em;
}

#contents {
padding: 1.5em;
background: #FFFDF3;
margin: 10;
}

.thumbs {
float: left;
}

Now as it is the images fall off the bottom edge of the enclosing div section. However, when I take out the "float: left;" declaration in the css file, the table fits, however the table is not aligned to the left of the div like I want it. Any suggestions are appreciated.

[Fang]

#contents {
zoom:1; /* float fix IE */
overflow:hidden; /* float fix FF */
padding: 1.5em;
background: #FFFDF3;
margin: 10; /* 10 what?? */
}

[jzwill]

Worked like a charm, thanks! I am kind of new to CSS.