Ergebnis 1 bis 5 von 5

Thema: Elternelement und Float

  1. #1
    HTML Newbie
    Registriert seit
    26.02.2016
    Beiträge
    2
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Elternelement und Float

    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?

    divs_und_float.jpg

    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;}
    html.PNG

    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Geändert von Greenalba1879 (26.02.2016 um 23:52 Uhr)

  2. #2
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    573
    Danke
    0
    Bekam 67 mal "Danke" in 65 Postings

    Standard AW: Elternelement und Float

    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

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    26.02.2016
    Beiträge
    2
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Elternelement und Float

    Zitat Zitat von MrMurphy Beitrag anzeigen
    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.

  4. #4
    Interessierte/r
    Registriert seit
    05.01.2016
    Beiträge
    146
    Danke
    9
    Bekam 11 mal "Danke" in 11 Postings

    Standard AW: Elternelement und Float

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

  5. #5
    Moderator Avatar von Arne Drews
    Registriert seit
    20.01.2016
    Ort
    Friedrichstadt, NF
    Beiträge
    1.236
    Danke
    21
    Bekam 120 mal "Danke" in 119 Postings

    Standard AW: Elternelement und Float

    Hallo,

    Zitat 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-Code:
    <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 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

Ähnliche Themen

  1. Darstellungsproblem float
    Von sekwoi im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 07.03.2011, 21:17
  2. CSS - Float
    Von Donkey im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 05.09.2010, 01:20
  3. Umsetzungsproblem (3x float)
    Von davidos_no.1 im Forum HTML & CSS Forum
    Antworten: 0
    Letzter Beitrag: 27.04.2009, 18:53
  4. Float im IE7
    Von Macrosdesign im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 12.11.2008, 08:05
  5. Probleme mit float
    Von Modula im Forum HTML & CSS Forum
    Antworten: 13
    Letzter Beitrag: 01.08.2005, 14:26

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •