Supportnet / Forum / Webseiten/HTML

Hallo, ich hab eine Frage zum Thema DIV -Ausrichtung mit Hilfe von float: Wenn ich ein Div im Style anweise, "float: left" zu sein, dann sollte doch eigentlich jedes nachfolgende Element das Div umfließen, [code]<div style="background-color: #900; width: 300; height: 300;float: left; padding: 0px; border: 0px; margin: 0px;"> Bla1 </div> <div style="background-color: #090; width: 300; height: 300; padding: 0px; border: 0px; margin: 0px;"> Bla2 </div>[/code] Bei diesem Beispiel ordnet der IE das zweite Div rechts neben dem ersten an, was soweit richig ist. Der Firefox legt sie dagegen scheinbar genau übereinander, so dass nur noch ein Div zu sehen ist. Mit ist aufgefallen, dass, wenn man dem zweiten Div auch ein "float: left" mitgibt, es im Firefox auch funktioniert. Aber warum? Sollte es von der Logik her nicht schon mit dem ersten Quellcode Beispiel funktionieren? Außerdem ist mir aufgefallen, dass es bei der ersten Variante keine Möglichkeit im IE gibt, die Elemente OHNE Lücke nebeneinander anzuordnen (außer mit getrickse, wie mit margin: -2; oder ähnlichem) Gibt man beiden Divs den float left mit, dann sind sie nahtlos nebeneinander. Wie ist denn diese float Geschichte nun genau gedacht? Kann mir jemand erklären, warum diese zwei seltsamen Zustände eintreten? (mit zwei float: left Einträgen funktioniert es zwar, aber ich würde es gern verstehen) vielen Dank schon mal im Voraus mit besten Grüßen maschka

Hallo.

Vielleicht hilft das bischen weiter:

float

MfG

Hi, <div> ist ein Blockelement wie auch <p>, dass heisst, du musst ihm mitteilen, was mit ihm geschen soll. Das machst du z.B. mit float.

MfG

Es gibt ein interessantes Tutorial zum Thema "float" bei thestyleworks.de. Außerdem gibt es dort auch eine sehr gute Erläuterung zu "float".

Da bin ich wieder,

danke für die Antworten... habe da jetzt ein wenig rumgeschmökert, aber die zwei Punkte die mir unklar waren, konnte ich leider nicht beantwortet finden =(
Grundsätzlich hab ich das Prinzip von float schon verstanden und gerade deswegen ist mir unklar, warum, wenn ich dem ersten DIV sage, dass es float: left sein soll und danach ein weiteres DIV definiere und ihm keine float - Angabe mitgebe, warum das dann im Firefox nicht rechts daneben dargestellt wird, was es doch eigentlich sollte, da ich ja dem ersten Element sage, dass es rechts umflossen werden soll?

Auch den zweiten Punkt, warum im IE die zwei DIVs zwar korrekt nebeneinander dargestellt werden, aber einen Lücke zwischen sich aufweisen, obwohl padding, border und margin auf 0 gesetzt worden sind.

Fragen über Fragen ;)
Aber dennoch schon mal vielen Dank!!!!

maschka

Servus,

Also zu der Sache mit dem kleinen Abstand.. ist ja normal dass Elemente meist eben diesem margin o.Ä. Abstand haben... und wenn das zweite Element auch noch float hat, dann ist es wie in dem einen Link zu lesen "Dann wird das float-positionierte Element aus dem Fluß herausgelöst und soweit nach links oder rechts verschoben, bis es entweder an die Kante des umschließenden Blocks oder eines anderen floatierten Elements anstößt" Anstößt also... also ganz ran.

Ach weiß nich bin grad erst aufgestanden sorry^^

Firefox macht solche komischen Sachen oft, wenn Syntaxfehler in den CSS-Angaben sind. In deinem Fall tippe ich auf die fehlenden Einheiten bei den Breiten und höhen. Ersetze mal die beiden durch

 width: 300px; height: 300px;

, dann geht es wahrscheinlich.

@friedel: habs probiert.. aber das wars leider auch nicht =(

• [CSS] div's nebeneinander - wie Tabelle
• Jokaaa
• CSS größenangaben Unterschied in IE/FF
• Innerer DIV-Container so hoch wie äußerer | WIE?
• wie zentriere ich 4 div's, die ich mittels float:left nebeineinander gemacht habe?