[xpla]

Also, mal gleich vorweg

FIREFOX STELLT NICHTS FALSCH DAR!

So, hier die Erklärung:
Firefox, als Browser der das Box Model richtig umsetzt macht folgendes:

Erstes DIV gibst du mit einer Weite von 100% an. Super, Firefox gibt dir genau das, was du willst! Laut gültigem Box Model eine eine Weite von 100% (nicht berücksichtigt sind Browser eigene Styles, denn sowohl IE als auch Firefox fügen ein Margin ein, sodass man dieses am besten durch ein resest-stylesheet entfernt (body bekommt von den Browsern ein margin).

So, Firefox macht also was du sagst, dann sagst du ihm, Junge, mach mir doch glatt einen Rahmen mit 10px. Laut gültigem Box-Model macht Firefox genau das, denn die Gesamtweite deines DIV ist die angegebene Weite ADDIERT um den Rahmen, also 10px je Seite = 100% + 10px + 10px = 100% + 20px.

Firefox macht also genau das, was du sagst. Fairerweise muss man sagen, dass sich der IE8 auch bei diesem Punkt an das box model haltet, und bei mir genau so einen horizontalen Scrollbalken erzeugt, da eben 100% + 20px vorgegeben wird.

So, nächster Fehler, äußeres DIV nur so hoch wie der Text. Klar, denn du verwendest, noch dazu in sich verschachtelte, Floats. Tust du dies nicht, ist dem ursprünglichen DIV völlig egal, wie hoch die gefloateten Block-Elemente sind.

Für was du ein !important setzt, geht mir nicht ein, aber vielleicht auch nur deswegen nicht, weil ich micht nicht damit beschäftigt habe, was du bezwecken willst, denn in deinem DIV mit !important ist kein Text auf dem die schwarze Schriftfarbe hätte angewendet werden können.

Wie schaut das Ganze etwas besser aus? Naja, so:

<div style="width:100%;"><!--umgebendes DIV-->
    <div style="border: 10px solid yellow;"><!--Rahmen DIV-->
        <div style="border:thin solid red; float:right; height:320px; width:440px; "><!--umgebendes Bild-Div-->
            <div style="border: thin solid rgb(143,143,143); border:thin solid blue; float: right; height:300px; width:440px; color: black !important;" id="Bild"><!--Bild DIV--></div>
        <!--umgebendes Bild-DIV--></div>
        
fsdfsdfsdf dffsdfsdfsdsdf

<!--Jetzt sollten wir mal die Floats aufheben-->
<div style="clear: both;"></div>

    <!--Rahmen DIV--></div>
<!--/umgebendes DIV--></div>