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;
}

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