Child element inheriting Parent styling

[jasonypr]

I have three elements.The CSS:\[code\]#parent { height: 300px; width: 580px; background-color: #f5f5f5; overflow: hidden;}#child { margin-right: auto; margin-left: auto; height: 300px; width: auto; overflow: auto;}#child img { height: auto; width: auto;}\[/code\]The HTML:\[code\]<div id="parent"> <div id="child"> <img/> </div></div>\[/code\]Now, essentially, if an image is smaller than 580px (width) I want it to be centered in the parent element. But, for some reason, when I set the width of the Child to auto, it fills the entire width of the Parent element. I want it to be the width of the photo so that it can be centered in the Parent div. How can I do this?