width not inheriting from parent? - css

Question

I'm attempting to have an overlay of an image. I've done it a bit before but for some reason today I'm obviously forgetting something. It seems to take the width of the entire page and not its parent:
#work_item {
position: relative;
width: auto;
}
#work_item img {}
#work_item a {
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 30;
height: 100%;
width: 100%;
background: #000;
color: #FFF;
}
<div id='work_item'>
<img src="" />
Click Here!
</div>
Any Help?

Answer 1

#work_item {
display: inline-block;
position: relative;
left: 0px;
top: 0px;
z-index: 1;
height: auto;
width: auto;
}
#work_item img {
position: relative;
z-index: 1;
left: 0px;
top: 0px;
}
#work_item a {
display: block;
position: absolute;
top: 0px;
left: 0px;
z-index: 30;
height: 100%;
width: 100%;
background: rgba(0,0,0,0.8);
color: #FFF;
}​
<div id='work_item'>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQfMwj05-cLtN4hGPTSKJcsElDOeNTW65rlmQKXzRo5ZCbFmvuY0dccZMU" />
Click Here!
</div>
Demo: http://jsfiddle.net/38v3h/

Answer 2

Add this code, if you meant the #work_item:
#work_item {
position: relative;
width: auto;
display: inline-block;
}
Fiddle: http://jsfiddle.net/CRY3g/

Answer 3

div is a block element which occupy the whole width of the its parent regardless of the width of its content. There are many ways to make the div #work_item to wrap the content.
display inline-block;
#work_item {
position: relative;
width: auto;
display inline-block;
}
you can also float the div:
#work_item {
position: relative;
width: auto;
float: left;
}