übles CSS Problem

Es ist soweit, ich finde keine Lösung für ein fieses Problem, im neuen Stylesheet. Unglücklicherweise ist es nicht mal was überaus Trickreiches, sondern eine relativ simple Angelegenheit. Ich habe dem Ganzen eine eigene Testseite gewidmet. Es geht um die in den p-Tags gefloateten span-Elemente. Wie man sieht, wird das span-Element im ersten Paragraphen anders dargestellt, als in den folgenden Beispielen. Der Code ist bei allen der gleiche.

<p><span class="inline-head-right">innere Headline</span>
Text...
</p>

CSS:
.inline-head-left, .inline-head-right {
width: 220px;
float: left;
margin: 0;
padding: 12px 10px 10px 0;
display: inline;
font: 1.6em Georgia, Times, 'Times Roman', serif;
color: #000;
line-height: 134%;
letter-spacing:-1px;
clear: none;
}

span.inline-head-right {
float: right;
padding: 11px 0 15px 11px;
}

Ich möchte, dass auch im ersten Paragraph, die gleiche Darstellung statt findet, wie in den untern p-Blöcken. Anzumerken wäre noch, dass IE6, zu meinem Erstaunen genau dies tut. Das Problem betrifft primär Firefox und Opera.

Die Ursache für das Problem habe ich gefunden, nur eine CSS-interne Lösung fehlt mir noch. Aus irgendeinem Grund, wird das span im ersten Absatz geclared. Ursache für diesen Clear, ist das zweite gefloatete Div, vor dem content-Div, was ebenfalls einen Clear besitzt.

<div class="content">
<div id="entryDetails">...
</div>

<div id="prenextTop">...
</div>

<p>...</p>
</div>

CSS:
.content p {
font: normal .8em Arial, Verdana, Helvetica, sans-serif;
line-height: 140%;
text-align: left;
width: 468px;
margin: 0 0 0 274px;
padding: 3px 20px 12px 0;
}

#entryDetails, #prenextTop{
position: relative;
clear: left;
float: left;
padding:0;
height: auto;
width: 224px;
margin: 0 0 0 30px;
display: inline;
text-align: right;
}

#entryDetails und #prenextTop besitzenfloat: left; und sind zusätzlich mit einem clear:left; versehen, genau dieses clear:left;, des zweiten Divs, ist der Übeltäter, der das span-Elemente irgendwie mit beeinflusst. Mir ist absolut unklar, wieso dies statt findet. Das span-Element ist innerhalb des p-Tags (welches eine fixe Breite besitzt) isoliert und dürfte somit nicht im global-Float hängen.

Ja es gibt Unmengen Lösungen, das Problem zu umgehen, ich möchte es aber lösen. Die p-Tags zu floaten oder #entryDetails und #prenextTop zu einer Div zu vereinen funktionieren zwar, aber genau das versuche ich zu umgehen. Ich möchte die Divs separat halten, um später eben mehr Freiheit in der Gestaltung zu haben.

Meine Frage also, wie bringe ich das span-Element dazu, nicht aus seinem übergeordneten Block-Level-Element, heraus zu schauen? Es kann doch nicht sein, dass die äußeren Floats der Divs, den Float innerhalb des p-Tags beeinflußen? Es ist genug Platz für alle Elemente vorhanden, nur scheint das erste span-Element, diesen Platz nicht zu “finden”.