Probleme mit div, float und browsern

[Tudor]

Folgender Text ergibt bei Firefox und IE unterschiedliche Ergebnisse, und ich möchte gern das vom IE auch bei Firefox haben... wo is mein Fehler?
der link: ( http://www.difvgg-priebe.de/test/test.html ) zeigt eine html mit unten gepostetem quelltextoder bitte kurz ne html mit dem quelltext erstellen und mit den beiden browsern öffenen. problem sieht man dann im firefox hoff ich. ie machts so wie ich es mir vorstellen.
sind 2 boxen mit je 3 divs, einmal mit div three:viel inhalt einmal mit div two: viel inhalt.

Quelltext

<style type="text/css">
<!--
.one {
 position: relative;
 top:0;
 left:0;
 border:thick solid #FF0033;
 width:200px;
 background-color: #00CCFF;
}
.two {
 position: relative;
 background-color: #66CC66;
 margin-right:2px;
 margin-left:2px
}
.three {
 position: relative;
 width:40px;
 float:left;
 background-color: #FF6633;
}
-->
</style>
<div class=one>
  <div class=two>
    <div class=three>Info klein</div>
    Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</div>
</div>

<br><br>

<div class=one>
  <div class=two>
    <div class=three>Info Info Info Info Info Info Info Info Info Info Info Info Info Info Info</div>
    Text klein</div>
</div>

[at]

Hallo.

Folgender Text ergibt bei Firefox und IE unterschiedliche Ergebnisse, und ich möchte gern das vom IE auch bei Firefox haben... wo is mein Fehler?

In der Annahme, der IE handele hier korrekt.

.one {
position: relative;
top:0;
left:0;

Sind diese Angaben wirklich notwendig? Wären float: left; clear: left; nicht sinnvoller.
MfG, at

[Tudor]

Hi at,

Sind diese Angaben wirklich notwendig? Wären float: left; clear: left; nicht sinnvoller.
MfG, at

in der Tat sind sie das ! Danke für die Hilfe, Problem gelöst ;)
mfg
Tudor

[Tudor]

hm. nochmal das gleiche problem.

wenn man diese drei bereiche wiederum in ein dif packt gibts erneut den fehler.

ich mach die frage mal generell:

wenn ich folgendes schreibe:

  
<div class=1>  
<div class=2>info</div>  
<div class=3>text</div>  
</div>  

class 2: hat float:left

sprich: ein bereich(1), der 2(2 und 3) enthält. einer der inneren(2, mit "info") links angeordnet von dem 2. inneren(3, "text") mit umflossen .
wieso passiert es mir bei Firefox, dass der umflossene bereich aus dem äusseren bereich "herauskommt" wenn der umfliessende bereich nicht gross genug ist.
der IE gibt dem bereich (2) genügend platz damit er in (1) reinpasst auch wenn (3) nicht gross genug ist um (2) komplett zu umfliessen. der mozilla malt den umflossenen bereich einfach über das die 2 divs enthaltenden bereich (also über (1)) hinaus.

[at]

Hallo.

wieso passiert es mir bei Firefox, dass der umflossene bereich aus dem äusseren bereich "herauskommt" wenn der umfliessende bereich nicht gross genug ist.

Weil Firefox im Gegensatz zum IE korrekt handelt. Mit float werden Elemente ja aus ihrem normalen Fluss innerhalb des Dokumentes herausgerissen. Damit dürfen umgebende Elemente die Höhe der innenliegenden Elemente nur dann respektieren, wenn die umgebenden Elemente selbst aus dem Fluss des Dokuments genommen sind. Näheres regelt die Norm.
MfG, at

[MudGuard]

Hi,

wenn man diese drei bereiche wiederum in ein dif packt gibts erneut den fehler.

<div class=1>
<div class=2>info</div>
<div class=3>text</div>
</div>

> class 2: hat float:left  
  
Dir ist klar, daß Du bei diesen Klassennamen mit Escape-Zeichen im CSS arbeiten mußt?  
  
Einfacher (und zuverlässiger): benutze Klassennamen, die mit einem Buchstaben beginnen.  
  
cu,  
Andreas

-- 
[Warum nennt sich Andreas hier MudGuard?](http://www.Mud-Guard.de/)  
[Schreinerei Waechter](http://www.schreinerei-waechter.de/)  
  
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.