Karl: Größenproblem bei verschachtelten Containern

Liebe Leute!
Offensichtlich hab ich heute ein dickes Brett vor dem Kopf.

Zuerst der Quellcode

  
<BODY>  
  
<DIV STYLE="background-color:red; border-style:solid; border-width:12px; border-color:#ffd7af">  
  
<SPAN STYLE="float:right; background-color:yellow; ">  
Text im gelben Kasten<BR>  
Text im gelben Kasten<BR>  
Text im gelben Kasten<BR>  
Meine größe hängt vom enthaltenen Text ab<BR>  
Text im gelben Kasten<BR>  
</SPAN>  
  
Ein kurzer Text im roten Kasten soll um den Gelben herumfließen.<BR>  
Bei zu kurzem Text im rotem Kasten soll der rote Katen genau so hoch werden wie der gelbe Kasten.  
  
</DIV>  
  
</BODY>  

Ich hab also eine rote Box und darin rechts oben eine kleinere gelbe.
Solange der Text in der roten Box ausreichend lang ist fließt er, wie gewollt, zuerst links und dann auch unter die gelbe Box.

Bei zu wenig rotem Text sollte die rote Box aber zumindest bis zur Unterkante der gelben Box reichen. Leider ist es aber so, dass die gelbe Box aus der roten "ausläuft".
Wie krieg ich das hin?

Ich sehe inzwischen vor lauter display, float, clear, overflow, position usw. kein Licht mehr am Ende des Tunnels und bitte um Erleuchtung.
l.g. Karl

  1. Hi,

    Bei zu wenig rotem Text sollte die rote Box aber zumindest bis zur Unterkante der gelben Box reichen. Leider ist es aber so, dass die gelbe Box aus der roten "ausläuft".
    Wie krieg ich das hin?

    http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout#float-einschliessen

    MfG ChrisB

    --
    RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
    1. Hallo ChrisB

      http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout#float-einschliessen

      Danke! Problem gelöst!
      Hatte <div STYLE="clear:right;"></div> schon mal versucht aber leider mit Tippfehler :-(

  2. Hi,

    Styleangaben gehören in einem Stylesheet und nicht inline notiert (<http://de.selfhtml.org/css/index.htm@title=wie geht das?>).
    Ich glaube es ist nicht falsch aber imho schlechter Stil(?) alle Elemente und Attribut-Bezeichner in Großbuchstaben zu schreiben.
    Ich gehe davon aus dass das nicht der komplette Code der Seite ist, denn falls dem so wäre fehlte ja der Doctype, das html-Element und das head-Element um ein valides HTML-Dokument zu sein.

    In dem vorgestellten Code ist das div-Element auf jeden Fall unnötig, die Styleangaben kann auch das body-Element erhalten.
    Und das span-Element sieht für mich nach einem Textabsatz (p-Element) aus.

    Zur Lösung deines Problems kann ich dir "clearfix" als Suchbegriff empfehlen und "overflow
    float
    "

    ~dave

    1. Danke Dave

      Styleangaben gehören in einem Stylesheet und nicht inline notiert.

      Mach ich auf der echten Seite auch. Aber hier find ich es übersichtlicher wenn man zwischen dem Element und dem Style nicht herumscrollen muss sondern alles in einer Zeile sieht.

      Ich gehe davon aus dass das nicht der komplette Code der Seite ist,

      Richtig. ich will ja nicht alles zuposten. :-)

      In dem vorgestellten Code ist das div-Element auf jeden Fall unnötig, die Styleangaben kann auch das body-Element erhalten.

      Auch richtig. Aber ich hab natürlich oberhalb und unterhalb des roten kastens noch einiges stehen.

      Zur Lösung deines Problems kann ich dir "clearfix" als Suchbegriff empfehlen und "overflow
      float
      "

      Danke für den Link.
      Karl