HTML & CSS | DIVs richtig anordenen

  • Tag zusammen!
    Ich habe ein dickes Problem, mit dem ich mich jetzt bereits seit Wochen beschäftige und einfach
    keine Lösung finde - Bin mittlerweile schon ziemlich verzweifelt! ;(


    Ich habe 3 Div-Container. Einmal den Hintergrund für die anderen zwei. Und halt die zwei anderen,
    die im Background stecken. Über all habe ich - height: auto;
    Und auch - float:left;


    Ist float: left; im Background weg, so funktioniert alles!! Ist float: left; im Background da, so passt sich die Höhe nicht automatisch
    an, sondern die beiden anderen Divs sind nicht mehr in der Hintergrund-Farbe von Background.


    Naja, sehts euch einfach mal an:


    HTML:



    CSS Datei:




    Ich bedanke mich bereits jetzt schon, wenn mir jemand helfen kann! :thumbup:

  • EEEEEinrückung


    Und dein Problem ist, dass du die floats nicht stoppst. -Floats müssen am ende immer gestoppt werden.
    Dies erreicht man mit css -> clear: both;


    Einfach ein Element nach div2 (z.B. div3) einsetzen und diesem clear:both; zuweisen :) (height auto und so zeug brauchst du NICHT)


    Und PS in Zeile 12 oder so hast du ein p-Tag nicht geschlossen.

  • Vielen


    Vielen Dank! 8)
    War schon echt am verzweifeln!


    Jedoch, eine Frage habe ich noch: gibt es eine andere Möglichkeit, den Background zu erhalten, ohne ein neuen Div anzufertigen mit cler: both;?


    Vielen herzlichen Dank!
    Ich bin dir rrrrrrriiiiicccccchhhhhhhttttttiiiiiigggggggg Dankbar!

  • Gibt es, vorausgesetzt du brauchst das after-Pseudoelement nicht anderweitig :)

    CSS
    #Background:after {
      content: "";
      display: block;
      clear: both;
    }


    Das ist normalerweise auch die dem zusätzlichen Element vorzuziehende Methode :)

  • Dem letztem div die von Lauras geschriebenen css Regeln geben .. :)

    CSS
    #container div:last-child():after{
      content: "";
      display: block;
      clear: both;
    }


    #container ist in dem Beispiel ds ausenliegende Div oder was auch immer. »div« sind sie innenliegenden 5 Div's
    Du kannst das letzte Div von den Fünf natürlich auch durch ne Klasse oder ID identifizieren.. :)

  • Ich lege hierfür in jedem Projekt eine Klasse mit dieser clearing-Methode an um diese an Elternelemente zu vergeben.
    Grundsätzlich gibt es in nahezu jedem Layout Elemente, die so korrigiert werden müssen, selbst wenn es optisch nicht auffällig wie in einem ul mit gefloateten li.
    Das Snippet (wenn auf lt IE8 geschissen wird) sieht dann so aus:

    Code
    .clearfix:before, .clearfix:after { content: ""; display: table; }
    .clearfix:after { clear: both; }
    .clearfix { *zoom: 1; }


    Es gibt eine weitere Methode dem Elternelement overflow: hidden zu vergeben, welche ich für kurzsichtig halte, da dieser spezielle block-Element Zustand durch eine fixe Höhe die Funktionalität der Kinderelemente behindert - auch wenn sie funktioniert. So viel zu best practice.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!