Die Tücken von float

[Der Martin]

Hallo Ihr! :)

Hallo du! :-)

Vorweg: Ich bin Anfänger und das bisschen, was ich über HTML, CSS & Co so weiß, hab ich mir selber aus selfHTML zusammengeklaubt. Ich habe zwar versucht im Forum etwas zu finden, das meinem Problem entspricht, aber ich hab schon Schwierigkeiten damit mein Problem in die richtigen Worte zu fassen

Hmm, das sind schwierige Voraussetzungen.

Ich war/bin mir nicht mal wirklich sicher, ob mein Problem in den HTML/XHTML-Bereich oder in den CSS-Bereich gehört ^^'

Eher letzteres. Was die Darstellung von Inhalten angeht, ist in der Regel Sache von CSS.

Das ist mein erster Beitrag hier - ich hoffe, ich hab es nicht komplett falsch gemacht...

Nö, keineswegs. Du beschreibst dein Problem einigermaßen verständlich, du fragst brav und anständig, du zeigst den dazu nötigen Code - damit qualifizierst du dich schon sehr gut.

<div style="text-align:left; padding:20px; border:thin solid silver">

<img style="width:40%; float:left; margin-right:20px; margin-bottom:20px" src="http://wcraft.lorebase.org/wp-content/uploads/cover.book_.dayofthedragon-de-430x640.jpg" title="" alt="Cover von 'Der Tag des Drachen'"/>
<blockquote>"Furchteinflössende Ereignisse in den höchsten Zaubererkreisen zwingen den jungen Magier Rhonin zu einer gefährlichen Reise in das von Orks kontrollierte Land Khaz Modan. Dort entdeckt Rhonin eine gewaltige, weitreichende Verschwörung, die dunkler ist als alles, was er sich je vorstellen konnte. Diese Bedrohung zwingt ihn zu einer gewagten Allianz mit uralten Kreaturen der Luft und des Feuers. Mit ihrer Hilfe wird es für die Welt Azeroth vielleicht ein Morgen geben."</blockquote>
<p style="font-weight:bold">Der Tag des Drachen, Buchrücken</p>
</div>

  

> Ich bewege mich in einer Wordpress-Umgebung und versuche einen von mir angelegten div-block nach meinen Vorstellungen zu formatieren, in dem ein <img>-Element, ein <blockquote>-Element und ein <p>-Element drin sind. Die beiden Text-Elemente fließen dabei per float um das Bild herum.  
> Wo das Problem beginnt: Ich will einen Rahmen um den <div>-Block und alle seine Inhalte ziehen. Das klappt im Grunde auch, aber das <img>-Element, das ich in diesem <div>-Block drin habe, wird dabei einfach ignoriert - und mir ist nicht klar, warum das so ist.  
  
Weil Elemente, die mit `float`{:.language-css} formatiert werden, aus dem normalen Textfluss herausgelöst werden und die Größe ihres Elternelements nicht mehr beeinflussen.  
Um das zu vermeiden, gibt es mehrere Möglichkeiten. Eine ist, dem letzten Element im float-Kontext (das wäre bei dir das p) ein `clear:left;`{:.language-css} oder `clear:both;`{:.language-css} zu verpassen, um das Floaten an der Stelle wieder aufzuheben. Eine andere, IMO elegantere ist, dem Containerelement `overflow:auto;`{:.language-css} mitzugeben. Eine weitere Möglichkeit wäre, das Elternelement ebenfalls zu floaten - das möchte man aber wegen der möglichen Nebenwirkungen wahrscheinlich vermeiden.  
  

> Oder habe ich da irgendwas noch nicht verstanden?  
  
Ja. Die nicht ganz triviale Funktionsweise von float und seine Kollateralschäden.  
Übrigens möchte ich dir dringend ans Herz legen, HTML und CSS sauber zu trennen - also nicht CSS-Angaben in style-Attributen zu notieren. Auch nicht "schnell mal zum Ausprobieren". Wenn du das in ein isoliertes Stylesheet auslagerst, entweder als style-Block im Kopf des HTML-Dokuments, oder noch besser als separate CSS-Ressource, ist das meist viel übersichtlicher und leichter zu pflegen.  
  
So long,  
 Martin  

-- 
Vielseitigkeit: Von vielen Dingen keine Ahnung haben.  
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(