Valid XHTML error - <div> is not allowed in <a>

I am trying to validate my document as XHTML 1.0 Transitional. I have the following error:

Line 73, Column 137: document type does not allow element "div" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag

Which corresponds to this code:

<td><a href="download.php?f='.$file.'"><div class="download"></div></a></td>

Which I know is incorrect because a <a> can't contain a <div> tag. CSS code is:

.download { 
    width:30px;
    height:24px;
    background:url('../images/download.png') 0 0; 
}
    
.download:hover{ background:url('../images/download.png') 0 -24px;}

I am trying to show a link to download a file, the CSS puts the image and hover image, which are:

But inverting tag order like:

<td><div class="download"><a href="download.php?f='.$file.'"></a></div></td>

Shows the correct image and hover image, but not a clickable link. I don't know how to show the correct link.

The link is not clickable because it is inline and is empty. This means it has zero width and height, so it is basically invisible. You should turn the <a> into a block element (so it will automatically adjust to the parent's width), and adjust it to its parent's (the div's) fixed height:

.download a { display: block; height: 100%; }

Of course this is for the valid markup:

<td><div class="download"><a href="download.php?f='.$file.'"></a></div></td>

jsFiddle Demo (with simple colored background, but it makes no difference)