c--: Block-Link (a / display:block) wird nicht richtig umrandet

Beitrag lesen

Okay, also hier jetzt mal ein leicht angepasstes Beispiel.

Doctype ist jetzt Strict.

Das h2-Element war falsch wie unnötig und hat von meiner Frage abgelenkt, entschuldigung.

Auf JS würde ich gerne verzichten, soweit möglich.

Noch mal meine Frage:
Es soll der gesamte Blockbereich eingerahmt (border / 1px) werden - genauso wie der gepunktete Rand (zumindest zeigt der FF einen gepunkteten Rand), solange man die linke Maustaste auf einem der Bilder gedrückt hält.
Stattdessen sorgt das "float:left" dafür, dass nur der Text selbst umrandet wird und das Bild aus dem Block (nach unten hin) hinausragt.
Wie bringe ich das Bild wieder in den Block hinein?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
"http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<title>test</title>  
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1;">  
<style type="text/css">  
.blocklink { display:block; border-width:1px; border-style:solid; border-color:black; }  
.blocklink img { float:left; }  
</style>  
</head>  
<body>  
  
<p>  
  
<a href="#" class="blocklink">  
<img src="http://www.google.com/intl/en_ALL/images/srpr/logo1w.png" alt="">  
  
test  
Dieser Text soll rechts neben dem Bild stehen.  
</a>  
  
<br><br><br><br><br><br><br><br><br>  
</p>  
  
  
<p>  
  
<a href="#" class="blocklink">  
<img src="http://www.underconsideration.com/brandnew/archives/bing_scaling.gif" alt="">  
  
ein weiterer test  
Dies ist eine zweite Box.  
</a>  
  
  
</p>  
  
  
</body>  
</html>