Elternelement und Float

Greenalba1879

Hallo,

Ich habe immer wieder folgendes Problem:
Ich erstelle eine box (Elternelement) und darin zwei weitere Boxen, welche links gefloatet sind und die Höhe fix vergeben ist.
Das Elternelement hat die Eigenschaft "min-height" bekommen und sollte sich eigentlich bis auf mindestens die Grösse der anderen Boxen vergrössern.
Tut es aber nicht sondern die Boxen springen raus. Wie kann ich das verhindern auch wenn die zwei Boxen unterschiedlich hoch sind?

Code

#start #news { width:80%; margin-left:auto; margin-right:auto; text-align:center; background-color:blue; }
#start #news article { background-color:#000000; width:100%; min-height:50px; clear:both;}
#start #news article section { width:300px; height:300px; background-color:#D45658; float:left;}
#start #news article aside { width:300px; height:300px; background-color:blue; float: left;}

MrMurphy

Hallo

Quelltext als Grafik in einem Forum gehen in Richtung Frechheit. Probleme sind am Besten in der Praxis zu orten. Soll etwa jeder Hilfswillige den Quelltext aus der Grafik abtippen?

height-Angaben sollten möglichst vermieden werden.

Du solltest dich über das richtige clearen zum Floaten informieren. Das scheint nicht zu stimmen.

Aktuell ist für deinen Layoutwunsch aber eher das Flexbox-Modell geeignet. Im Gegensatz zu float es es zudem speziell für solche grundlegenden erstellt worden.

Gruss

MrMurphy

Greenalba1879

Zitat von MrMurphy

Hallo

Quelltext als Grafik in einem Forum gehen in Richtung Frechheit. Probleme sind am Besten in der Praxis zu orten. Soll etwa jeder Hilfswillige den Quelltext aus der Grafik abtippen?

height-Angaben sollten möglichst vermieden werden.

Du solltest dich über das richtige clearen zum Floaten informieren. Das scheint nicht zu stimmen.

Aktuell ist für deinen Layoutwunsch aber eher das Flexbox-Modell geeignet. Im Gegensatz zu float es es zudem speziell für solche grundlegenden erstellt worden.

Gruss

MrMurphy

Alles anzeigen

Hallo,

Vielen Dank für die Antwort, ja ich weiss der Code als Bild ist nicht sehr nice aber es hat irgendwie nicht mit dem einfügen geklappt sry.
Ok. Werde es mal anschauen.

modem-kind

Moin
wenn du ein KindElement
(ALLE Elemente im HTML sind KindElemente von irgend einem anderem )
float: ...; zuweist, !Verlassen! sie die Ebene des ElternElements / und aller Vorfahren -

Ihr weiteres Verhalten hat dadurch keinen Einfluss mehr auf Ihr ElternElement / zb. die höhe -
das ist so als würde man einen Luftballon aufblasen
wollen aber hält den neben den Mund
nix passiert !

wenn man dem ElternElement dann auch float zuweist
sind sie wieder auf der selben Ebene.
so ist Ballon und der Mund wieder zusammen
und er kann sich verändern / verändert werden !

Ein clear: ... ; - muss immer gesetzt werden wenn es nachfolgende Elemente gibt
die nicht weiter vom float: ...; - beeinflusst werden sollen !

Mit Display: flex; -geht es meistens alles einfacher wie MrMurphy schon sagte..

*{ opacity: 0;} /* */

Arne Drews

Hallo,

Zitat von modem-kind

wenn du ein KindElement
(ALLE Elemente im HTML sind KindElemente von irgend einem anderem )
float: ...; zuweist, !Verlassen! sie die Ebene des ElternElements / und aller Vorfahren -

Was ist das denn für ein Humbug?!
Verlassen tut kein Element irgend ein anderes, das Verhalten, was Du meinst trifft eher auf position:absolute; zu.

float gibt eine Art Flussplan für Elemente an. Wenn ich folgendes habe:

HTML

<div class="wrapper">
    <div class="left">links</div>
    <div class="right">rechts</div>
</div>

Code

.wrapper { width:75%; }
.wrapper > DIV { display:inline-block; width:45%; }
.left { float:left; }
.right { float:right; }
.right:after { clear:both; }

Dann verlässt keiner der beiden inneren DIVs den wrapper-DIV! Sie werden beide nebeneinander innerhalb dessen angezeigt.

Zitat von modem-kind

Ihr weiteres Verhalten hat dadurch keinen Einfluss mehr auf Ihr ElternElement / zb. die höhe -
das ist so als würde man einen Luftballon aufblasen
wollen aber hält den neben den Mund
nix passiert !

Das von Dir nachfolgend angesprochene clear an der richtigen Stelle behebt das Problem!
Die Elemente bleiben dennoch innerhalb des Elternelementes, überragen aufgrund des floating allerdings dessen Rahmen, bis korrekt gecleared wird!

Gruß Arne

Tags