How can I set the width and height of a container div?

[DCTAZ]

I have the following:\[code\]<div id="container"> <img src="http://stackoverflow.com/questions/15751660/pic.png"></div>\[/code\]This is styled as follows:\[code\]div.container { height: 50px; width: 50px;}\[/code\]In addition to this, I have some javascript hackery to cause the image to appear dead center in the containing div by setting \[code\]margin-top\[/code\] and \[code\]margin-left\[/code\].When I look at this in the Chrome web inspector, it's clear that the containing div does not start at the top of its parent. I suspect the image is being positioned relative to the container div's parent.The trouble with this is that I want the container div to be a target for click events, such as dragging. The div only starts at the top of the image, when I want it to start above the image, and include the margin space as a part of the container. Any advice?