Elternelement und Float

1. offizieller Beitrag

    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;}

    :confused::confused::confused:

    2 Mal editiert, zuletzt von Greenalba1879 (26. Februar 2016 um 22:52)

    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

    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. :)

    Moin :cool:
    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;} /* :D */

    • Offizieller Beitrag

    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