#1 23. Juni 2009 Verschiebung von Elementen Ich habe ein Problem: Ich möchte gern Bildern in <div> Tags von Text umfließen lassen. Funktioniert auch. Aber: Sobald der Text nicht lang genug ist, um das Bild bis unten hin zu umfließen, und nach dem <div> Tag ein weiteres folgt, setzt dieses auch mitten im 1. <div> Tag ein, obwohl das nicht so sein sollte. Natürlich soll der folgende <div> Tag erst beginnen, wenn der erste abgeschlossen ist, auch, wenn der Text nicht reicht, um das Bild bis unten hin zu umfließen. Bilder: {bild down} {bild down} + Multi-Zitat Zitieren
#2 23. Juni 2009 AW: Verschiebung von Elementen Stichwort: Containing Floats Mach einfach ein unsichtbares Element mit clear-Funktion ans Ende deines divs. + Multi-Zitat Zitieren
#3 24. Juni 2009 AW: Verschiebung von Elementen Das müsstest du näher erläutern, das sagt mir alles nichts! Aber schonmal danke! + Multi-Zitat Zitieren
#4 24. Juni 2009 AW: Verschiebung von Elementen Floats gehören nicht zum normalen Seitenfluss, d.h. dein static-positioniertes div kümmert sich nicht darum, wie groß es wird. Das Problem, dass man i.d.R. möchte, dass das div das gefloatete Element mit einschließt, wird oft als "containing floats" bezeichnet. Die einfachste Lösung ist, ganz ans Ende deines divs ein unsichtbares Element zu stellen, dem du die Eigenschaft "clear" gibst. Dieses Element wird dann unter dein Float angeordnet, und da dieses Clear-Element im Gegensatz zum gefloateten Element vom div umschlossen wird, vergrößert sich auch das umschließende div auf die gewünschte Größe. Hier ein Bsp: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head> <title>Containing Floats</title> <style type="text/css"> <!-- #container{ background-color:#FFAA2A; } #floated{ float: left; width: 200px; height: 400px; background-color:#5555FF; } .clear{ clear: both; visibility: hidden; } --> </style> </head> <body> <div id="container"> <div id="floated">gefloatetes div</div> <p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <hr class="clear"/> </div> </body> </html> Wenn du das <hr> auskommentierst, erhälst du das Problem, das du hast, nämlich, dass das gefloatete Element aus dem div herausragt. Mit dem clear wird es dann (scheinbar) umschlossen. + Multi-Zitat Zitieren