How to create block that is not resized to parent's width?

Question

I have such a situation:

<div>
  <a href="#"><img alt="" src="img.jpg"></a>
</div>

div { width: 200px; }
a { display: block; width: auto; }

What I expect is the minimum required width for "a" element given - the width of an image in this case. But instead I got "a" with width of 200px. How to prevent this resizing?

Answer 1

block elements occupy the width of their parent by definition, unless explicitly overridden by a specific width with defined units. You can't have it free float to the width of its contents. Consider inline.

Answer 2

David is right. May I ask why you are setting the a to display: block?