Text aus Div fließt in Text aus Blocklevelelement

[bivg]

Ein div (hier gelb) beinhaltet Text. In dieses div ragt ein Link als Blockelement (hier rot).
In Firefox, Opera und IE 8 stimmt der Abstand zum roten Text, in Safari, IE 6 und Chrome fließt die zweite Zeile des gelben Textes in den roten Bereich (siehe Bild). Die übrigen Abstände (rechts, unten) stimmen auch hier.

.red {  
display: block;  
float: left;  
clear: left;  
margin-top: 0.2em;  
margin-right: 0.8em;  
margin-bottom: 0.2em;  
padding-left: 0.3em;  
font-size: 2.2em;  
letter-spacing: 0.2em;  
text-decoration: none;  
}

.yellow {  
display: block;  
margin-left: 8em;  
line-height: 130%;  
}

Wie erreiche ich in den erwähnten Browsern auch nach oben den korrekten Abstand?

Danke!