Falscher Abstand im Internetexplorer

[Koken]

Hallo,

Ich hoffe wieder auf eure wertvolle Hilfe. Ich habe ein css-basiertes Layout, das ansonsten in allen Browsern prima funktioniert (html und css sind w3c valid).
Aber der Internet Explorer stellt sich mal Wieder quer!

So sollte es aussehen: http://koken.man-ma.de/richtig.PNG
So sieht es im Internetexplorer aus: http://koken.man-ma.de/msie.PNG

Der Internet Explorer hält den Seitenrand nicht richtig ein, sobald der <div id="bild"> die Eigenschaft float:right bekommt.
Wie bekomme ich nun den IE dazu, den Abstand richtig zu halten? oder habt ihr andere Lösungsvorschläge?

//------------------------------------------------
der HTML-Teil:

<div id="links">
    <h1>Navigation</h1>
    <ul class="navigation">
        <li><a href="">Link</a></li>
        <li><a href="">Link</a></li>
        <li><a href="">Link</a></li>
        <li><a href="">Link</a></li>
    </ul>
</div>

<div id="rechts">
    <h1 id="lokator">Lokator >> <a href="">Teil</a> >> <a href="">Teil</a></h1>
    <div id="inhalt">
        <h1>Überschrift</h1>
        <div id="bild"><img src="Testbild.png" alt="Testbild">Sehen sie alle Farben?</div>
        <p>Text text text text text text text text text text text text text text text </p>
    </div>
</div>
//------------------------------------------------

//------------------------------------------------
Das css dazu:

#links {
    float:left;
    width:13em;
}

#rechts {
    margin-left:13em;
}

#rechts #inhalt {
    margin-left:10px;
    border:solid #415694 2px;
    padding:10px;
    background-color:#B6C5F2;
    text-align:justify;
}

#rechts #inhalt #bild {
    float:right;
    border:solid #415694 1px;
    background-color:#A5B4E1;
}

//------------------------------------------------

[Steel]

Der IE neigt dazu den Margin in floatrichtung nach links und rechts zu verdoppeln, wenn in diese Richtung nur noch der Rand des Elternelements ist.

also benoetigst Du einen IE Hack. Der faellt in diesem Fall aber erschreneknd simpel aus:
Gib dem Float noch display:inline und gut.

Per Definition gibt float einem Element immer 'block' und wird auch nicht von 'display' beeinflusst ausser mit 'none'. Damit haste gueltiges CSS, das auf allen Browsern funktionieren sollte.

[Koken]

Vielen Dank für die Antwort

also benoetigst Du einen IE Hack. Der faellt in diesem Fall aber erschreneknd simpel aus:
Gib dem Float noch display:inline und gut.

Leider ist es damit noch nicht ganz erledigt. Es funktioniert, aber nur, wenn genügend Text neben dem Bild steht. Ist etwas weniger Text vorhanden, gibt es wieder den alten Fehler. Außerdem ist die Schrift dann zuerst überhaupt nicht sichtbar, bis man über einen Link fährt usw. (ist ja ein bekanntes Phänomen). Dabei hat das Element <p> schon die Eigenschaft position:relative;

[Koken]

Ich habe eine Lösung für mein Problem gefunden. Eigentlich bin ich ihm mehr davongelaufen. Ich realisiere den Abstand nun, indem ich ich #links einen margin-right gebe. #inhalt hat nun keinen margin-left mehr. Wo nichts ist, kann IE auch nichts falsch anzeigen.

Trotzdem wäre es interessant zu wissen, ob es eine andere, elegantere Möglichkeit gäbe.

Vielen Dank an euch, bis zum nächsten Problem.