✔ Div-Boxen float-problem?

Grille

Grille

Erfahrenes Mitglied
hallo,

bei meiner Arbeit erlebe ich immer wieder das gleiche Déjà-vu : Ein Bild was in einer Div-Box ist, ragt aus der Box herraus und nachfolgende Bilder, Boxen und Elemente, sammeln sich dann rechts an dem Bild an. Nun ist alles verschoben und Grille suchst wieder wie blöd den Fehler.

Ich gehe davon aus, dass es ein Problem mit float & clear ist. ... doch leider weis ich nicht, wo ich das clear setzen muss und warum das eigentlich so ist. Ich würde mich super freuen, wenn mir jemand sagen könnte, wie man den fehler findet und ausschaltet.

Zählt man alle floats der Seite durch und muss dann genauso viele clearfix verteilen?:confused:

Hier die Problemstelle: http://www.gebaerdenfabrik.de/gftest/index.php?option=com_content&view=article&id=95&Itemid=77

Vielen Dank,
Grille.
 
Hi,

hilfst du mir auf die Sprünge, wo dort ein Problem existiert?

Sieht doch alles proper aus.

mfg Maik
 
Hallo Maik,

vielen Dank ...
In meinem FireFox 3.6 werden die Fotos (Gesichter) nicht untereinander gezeigt, sondern im zickzack nach unten. Das ist mein Problem.

Ok ... habe einen guten Artikel gefunden ...

http://www.css-technik.de/css-examples/219_9/

hier steht ...
Jedes Element, das man floatet, wir dadurch automatisch zu einem Block-Element. Das bedeutet, dass man ihm sowohl eine Breite (width) als auch eine Höhe (height) zuweisen kann. Tatsächlich müssen Floats sogar eine zugewiesene Breite haben. Diese wegzulassen, ist ein häufig gemachter Fehler und während das manche Browser verzeihen, stolpern all diejenigen Browser darüber, die sich auf Webstandards besser verstehen. Ohne die Breitenangabe könnte das gefloatete Element entweder so breit sein wie sein Inhalt oder aber wie sein Elternelement.
Zum Vergrößern anklicken....
 
Gib mal den vier umschliessenden DIV-Blöcken eine clear-Regel mit auf dem Weg, um ihre derzeitige "Zick-Zack-Anordnung" aus der Welt zu schaffen.

mfg Maik
 
HTML: 
<div style="clear: both;">
  <img src="beispielbild.png"  alt="Beispielbild" style="margin: 0px 20px 20px 0px; float: left;  width:100%;" border="0" />
  <h6>Überschrift...</h6>
   <p>...und noch weitere Texte die "floaten" (also rechts vom Bild stehen)</p>
</div>
<p>Dieser Text ist nicht rechts vom Bild, weil Div-Box "clear: both;" als css-style hat.</p>

Vielen Dank Maik! In der Hoffnung dass ich niemals wieder zu diesem Thema eine Frage stellen muss.
Gruß, Grille. :D
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück