Hallo zusammen,
wollte in einen von zwei DIV-Containern kleinere Container integrieren und die zwei Hauptcontainer links nebeneinander anordnen.
Ziel1
Ziel2
Ziel3
Doch beiden werden untereinander angezeigt. Wie kann das sein?
Gruß
Hallo Alex,
wollte in einen von zwei DIV-Containern kleinere Container
integrieren und die zwei Hauptcontainer links nebeneinander
anordnen.
float gibt an, wie sich das Element im Umfluss verhalten soll.
default ist none.
daher brauchen beide Hauptcontainer ein float:left
Gruß
Klaus
Danke!
Hallo,
hab’ es selbst nochmal probiert. Der zweite Hauptcontainer wird gefloatet, aber er hat leider keinen Inhalt.
Der Untercontainer mit den Radiobuttons wurde wieder normal in den Umfluss eingebracht.
Vielen Dank für die Hilfe!
Hallo Alex,
hab’ es selbst nochmal probiert. Der zweite Hauptcontainer
wird gefloatet, aber er hat leider keinen Inhalt.
ne … float steuert das Verhalten des Elementes, für das float definiert ist.
Wenn Du nur für das 2. Element float left setzt, dann stehen die Element übereineinander, da für das 1. Element float auf none per default steht.
Der Untercontainer mit den Radiobuttons wurde wieder normal
in den Umfluss eingebracht.
float ist zwar nicht vererbbar, aber das hat nichts damit zu tun. Kindelemente können nicht aus dem Elternelement „springen“ !! (außer mit position-absolute)
Gruß
Klaus
Ok, war total falsch von mir, was ich da gesagt habe.
Vielen Dank für die Korrekturen.
Gruß
Leider doch nochmal eine Frage
Hallo nochmal,
jetzt habe ich doch noch eine Frage.
Bei folgendem Code werden die Buchstaben untereinander angezeigt.
A
B
C
D
Das ist klar. Aber wenn ich die erste Zeile in A umschreibe, erscheint A und B in einer Zeile. Warum bezieht sich Float hier auch auf den Container, in dem B enthalten ist?
Gruß
Lösung
Hallo,
bin selber draufgekommen.
Beim ersten Codebeispiel handelt es sich um Blockelemente, die per Definition einen neuen Absatz erzeugen.
Das ist klar. Aber wenn ich die erste Zeile in A umschreibe, erscheint A und B in
einer Zeile. Warum bezieht sich Float hier auch auf den
Container, in dem B enthalten ist?
Float bezieht sich nicht auf den Container. Das Blockelement ignoriert einfach das Floatelement.
Gruß
Moin!
Float bezieht sich nicht auf den Container. Das Blockelement
ignoriert einfach das Floatelement.
Doch, float bezieht sich auf den Container, in dem es gesetzt ist.
float macht aber nicht das, was man früher mit dem HTML-Attribut „align“ gemacht hat.
float nimmt das Element, in dem es gesetzt ist, aus dem Textfluss. Dadurch wird dann die Positionierung der nachfolgenden Elemente beeinflusst, und das ist das, warum Du glaubst, float beziehe sich auf die nachfolgenden Elemente.
Der „Textfluss“ ist sowas wie ein Stift. Der beginnt oben links und setzt da das erste Element hin. Dann wandert dieser „Stift“ an die nächste Position. Bei Inline-Elementen ist das rechts vom Element, bei Block-Elementen ist das darunter.
Nimmst Du ein Element aus dem Textfluss, bleibt der Stift stehen und das nachfolgende Element wird an die selbe Stelle gesetzt, wie das gefloatete.
Bei Block-Elementen mit Inhalt macht das den Eindruck, als würden diese nebeneinander liegen. Das ist aber eigentlich nicht wahr. Wenn Du Dir Deine Elemente mal genauer ansiehst, wirst Du feststellen, dass sie tatsächlich übereinander liegen, also an der selben Stelle links/oben beginnen. Der Inline-Inhalt jedoch wird daneben angeordnet (eben „gefloatet“, wie man das von „align“ her kennt), weswegen es so aussieht, als wären auch die Block-Elemente nebeneinander. Richtig nebeneinander sind sie dann nur, wenn Du dem zweiten Element ein margin-left in geeigneter Größe mitgibst.
Den „Textfluss“ zu verstehen, ist eine ganz wichtige Grundlage beim Arbeiten mit CSS. Das ist auch bei relativer oder absoluter Positionierung sehr wichtig.
Ich hoffe, ich konnte ein wenig Licht in Dein Dunkel bringen!
Liebe Grüße,
-Efchen
1 Like
Hallo und Danke!
Hab’ den Text „Float: Die Theorie“ falsch verstanden.
Dort heißt es.
Abgesehen von diesen beiden Eigenschaften, haben Floats
große Ähnlichkeit mit absolut positionierten Elementen, denn beide werden. von „normalen“ Blockboxen völlig ignoriert. Diese statisch angeordneten, (= „normalen“) Blockboxen werden in ihrem Fluss eine nach der anderen so angeordnet, als ob die Floats gar nicht vorhanden wären.
Ich dachte, dass dann die Blockboxen den float völlig ignorieren.
Danke nochmal.