Link outside div tag encompasses empty space

Issue

I have a link outside a div like in the following example:

<a href="http://google.com">
    <div id="Something" style="width:200px; height:100px; display:block; background-color:red; padding:0; margin:0;">
    </div>
</a>

Now, the link does work on any part of the div, but it is also present outside the div, mainly to the right side of it where there isn't anything. How can I fix this to make the link only work inside the div tag?

Here's the code in jsfiddle: http://jsfiddle.net/BWPHS/

Solution

Note, DIV elements are display: block by default, so you don't need that in the DIV. What you do need to do is make the A the same height, and resolve the padding and margin to taste.

<div id="Something" style="width:200px; height:100px; background-color:red; padding:0; margin:0;">
    <a href="http://google.com" style="height: 100px; display:block; padding: 0; margin: 0;"></a>
</div>

http://jsfiddle.net/BWPHS/3/

Note, as sdleihssirc notes, HTML5 does allow it (if you use the DOCTYPE). Note, to resolve the specific issue for HTML5, you would need to apply the height and width to the A tag:

<a href="http://google.com" style="width: 200px; height: 100px; display:block; padding: 0; margin: 0; background: blue;">
    <div id="Something" style="height: 100px; background-color: red; padding:0; margin:0;"></div>
</a>

http://jsfiddle.net/BWPHS/2/

And, as thirtydot points out, you can display: inline-block or float: left the #something element and apply display: block to the A and it should work perfectly for you:

#something,
#something a {
  padding: 0;
  margin: 0;
}
#something {
  display: inline-block;
  background: red;
}
#something a:link {
  display: block;
  width: 200px;
  height: 100px;
}

<div id="something">
    <a href="http://google.com"></a>
</div>

http://jsfiddle.net/BWPHS/6/

And you probably want to try to avoid using inline style attributes.

Answered By - Jared Farrish