Firstly, I am pretty new to CSS so I may get my wording wrong here... but I am trying to convert all my web page tables over to CSS. The end results need to produce a:

1. One expandable container centered in the middle of the web page.
2. Images (all of different sizes) within that container are inserted randomly under a list of items... but centered within the container.
ex: 1. blah blah blah
2. blah blah blah
-image centered within the contained area-
3. blah blah blah
- another image of different size centered within contained area-

I am using the following code for the container centered within the web page:

#center {
background-image: url(inner.gif);
width:700px;
height:350px;
position:absolute;
top:20%;
left:50%;
margin:-50px auto auto -350px;
border:5px solid black;
}
This looks and works great in IE-- but doesnt expand within the content in Mozilla. Is the code bad for Mozilla or should I be looking for a CSS code error elsewhere in my document? Any other suggestions on how to acheive a 1 centered expandable container on a page?

Second issue: The images--I was trying to use this code to position my images:

img.top {
margin-left:175px;
}
Of course, this doesnt center every image because they vary in size. Is there 1 code that I can use that will position each image in the center( horizontally) of the container or do I have to create a code for each different size? Some of my pages have upward of 20 images, so I'm really looking for a catch all horizontal centering code.

I havent loaded any pages on the web yet, so I can't attach a link for viewing... Hoping that the info above is enough... Many thanks for any assistance