DIVs mit display:inline

[snorri]

Hej!

Vorweg: Ich gehörte bisher zu den altmodischen Typen, die ihre Webseiten mit Layout-Tabellen bauen. Jetzt versuche ich zum ersten mal ernsthaft, das mit positionierten CIVs zu machen, und stoße dabei auf ein Problem. Ich habe mal einen Testfall zusammengebaut:

<div style="width:150px; height:50px; background-color:#FF0000; overflow:auto; white-space:nowrap;">
 <div style="width:100px; background-color:#00FF00; display:inline"><img src="x.gif" width="100" height="1"><br>1</div>
 <div style="width:100px; background-color:#0000FF; display:inline"><img src="x.gif" width="100" height="1"><br>2</div>
 <div style="width:100px; background-color:#00FFFF; display:inline"><img src="x.gif" width="100" height="1"><br>3</div>
</div>

In IE und Opera sehe ich, wie beabsichtigt, ein rotes, 150px breites DIV, in dem drei bunte, je 100 Pixel breite DIVs NEBENeinander stehen, weshalb das äußere DIV einen HORIZONTALEN Scrollbar einblendet.

Im Mozilla aber sehe ich in diesem äußeren DIV ein buntes Durcheinander und einen VERTIKALEN Scrollbar.

Was mache ich falsch?