float problem

[anian]

hi @ all,
ich hab viel die suche bemüht, aber nicht das richtige gefunden.
ich habe ein float-problem, nur der ie stellt es so dar wie ich mir das vorstelle.
ich habe ein div elternelement, mit
width: 695px und darin sind
zwei div elemente mit einmal
width: 390px plus margin-right: 10px und einmal
width: 260px; plus margin-right: 15px.
diese beide haben text und image inhalte, und sollten eigentlich nebeneinander dargestellt werden (mittels float: left;).
das macht aber nur der ie so. firefox, netscape und opera allerdings nicht.
ich poste mal den code (da wo ich die ... gecshrieben habe steht text):

<div style="width: 695px; overflow: hidden: text-align: left; padding-left: 25px; padding-top: 25px;">  
 <div style="width: 390px; margin-right: 10px; overflow: hidden; float: left; text-align: left;">  
  <div style="text-align: left" class="top">  
                   ...  
  </div>  
  <p style="text-align: justify;" class="text">  
     ...  
  </p>  
  <p style="text-align: justify;" class="text">  
     ...  
  </p>  
  <p style="text-align: justify;" class="text">  
     ...  
  </p>  
  <p style="text-align: justify;" class="text">  
     ...  
  </p>  
 </div>  
 <div style="text-align: left; width: 260px; margin-right: 15px; ">  
  <div style="margin-top: 40px;">  
                   <img src="images/why1.jpg" width="260" height="195"  border="0" alt="Köörb">  
                </div>  
  <div style="margin-top: 20px;">  
                   <img src="images/why3.jpg" width="260" height="415"  border="0" alt="Go Go ">  
                </div>  
 </div>  
</div>  
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  
  
bin um jeden tipp dankbar vorallem am sonntag ;-)  
  
greetz  
  
anian

[Julius]

Hallo anian,

ich versuch's mal:

<div style="text-align: left; width: 260px; margin-right: 15px; ">

Bei dem zweiten Innen-div fehlt noch die float-Angabe. Wenn du sie ergänzt, dann müsste es funktionieren.

Das Problem, dass sich nun ergibt, ist, dass das umschließende div nicht mehr die Innen-divs umfasst (frag mich nicht warum). Eine einfache Lösung hierfür: füge unten ein div mit clear:both; ein, das meinetwegen nur 1px hoch ist:

<div class="umfassend">
<div class="links">...</div>
<div class="rechts">...</div>
<div class="clear">&#160;</div>
</div>

div.clear {clear:both; font-size:1px;}

Sollte es nicht klappen, dann weiß ich auch nicht.

Grüße
Julius

[Detlef G.]

Hallo Julius, hallo anian

Das Problem, dass sich nun ergibt, ist, dass das umschließende div nicht mehr die Innen-divs umfasst (frag mich nicht warum).

Gefloatete Elemente werden aus dem regulären Elementfluss genommen. Sie haben
damit keinen Einfluss mehr auf die Größe des umgebenen Elementes, außer wenn
dieses selbst gefloatet ist.

<div style="width: 695px; overflow: hidden: text-align: left; padding-left: 25px; padding-top: 25px;">

^
                      hier ist noch ein Fehler

Auf Wiederlesen
Detlef

[anian]

Bei dem zweiten Innen-div fehlt noch die float-Angabe. Wenn du sie ergänzt, dann müsste es funktionieren.

ist die float: right; (nehm ich an!) zwingend, oder browserspezifisch notwendig?

danke an beide erstmal

[Julius]

müsste auch float:left sein.

Grüße
Julius