Div als Zeichen behandeln - ohne umzubrechen

[Stephan]

Hallo

zur Bewertung eines Dings habe ich so eine Art Ampelbewerung mit HTML/CSS geschrieben, welche einen einfachen Kreis innerhalb eines Div's ausgibt und diesen mittels css einfärbt und mittels a:hover umfärbt.
Also so:

CSS:

#green a:hover { float: none; color: red; }
#green a{ color: green; text-decoration: none; }

#yellow a:hover { color: green; }
#yellow a{ color: yellow; text-decoration: none; }

#red a:hover { color: yellow; }
#red a{ color: red; text-decoration: none; }

HTML:

irgendwelcher Text <div id='red'>Kreis</div> irgendwelcher Text

Im Browser sieht man aber:

irgendwelcher Text
Kreis
irgendwelcher Text

wie kann ich das Ding dazu bringen nicht umzubrechen?

vielen Dank für alle Antworten
Stephan