Problem mit 2 verschachtelten floats

Einklappen
X
Einklappen
 
  • Seite von 1
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige template Weiter
  • #1

    Problem mit 2 verschachtelten floats

    Hallo,

    Ich habe Links ein div (Menu) welches nach links gefloatet ist. Rechts davon befindet sich ein Content div. Diese Struktur ist fix durch das Template definiert, und sollte wenn möglich nicht geändert werden.

    Im Content Div habe ich nun ein Header div und ein Footer div. Zwischen beiden befinden sich 2 divs (2 Kolonnen) die "float: left" als eigenschaft besitzen.

    Nun zu meinem Problem:
    Damit das Footer div unter die Beiden Kolonnen rutscht, habe ich ein "clear:both" eingesetzt. Das Problem ist nun dass nun nicht nur die beiden Kolonnen, sondern auch das Menu div mit gecleared wird, und so das Footer div mit unter das Menu rutscht. Es sollte sich eigendlich direkt unter den Beiden Kolonnen befinden.

    Tabelle wollte ich vermeiden. Ausser es sei nicht anders zu lösen.

    Hier mal Beispiel HTML was mein Problem wiederspiegelt.

    PHP-Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"    >
    <    html xmlns="http://www.w3.org/1999/xhtml">
    <    head>
    <    title>Conforming XHTML 1.1 Template</title>
    </    head>
    <    body>

    <!--     Menu -->
    <    div style="float: left; width: 100px; background-color: #F00;">
            Left Col<br />
            Left Col<br />
            Left Col<br />
            Left Col<br />
            Left Col<br />
            Left Col<br />
            Left Col<br />
            Left Col<br />
            Left Col<br />
            Left Col<br />
            Left Col<br />
    </    div>

    <!--     Content -->
    <    div style="background-color: #F39; margin: 10px; margin-left: 120px;">

    <!--     Header -->
    <    div style="background-color: #0F0; margin: 10px;">
            Header
    </div>

    <!--     2 Kolonnen -->
    <    div style="float: left; width: 40%; background-color: #999; margin: 10px;">
            Col1
    </div>
    <    div style="float: left; width: 40%; background-color: #CCC; margin: 10px;">
            Col2<br />
            Col2<br />
            Col2<br />
    </    div>

    <!--     Footer -->
    <    div style="background-color: #0FF; clear: both; margin: 10px;">
            Footer
    </div>

    </    div>

    </    body>
    </    html> 
    Würde mich auf eine Lösung des Problems freuen.

    MfG
    Daniel
    Stichworte: clear, css, float, kolonnen, verschachtelt
  • #2
    Hallo,

    Floats kann man zwar verschachteln, aber ein clear wirkt sich immer auf alle Floats aus, daher ist es generell keine gute Idee, mit verschachtelten Floats zu arbeiten.

    Gruß,

    Amica
    [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
    Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
    Super, danke!
    [/COLOR]

    Kommentar

    • #3
      Danke für die schnelle Antwort.

      Welche Möglichkeiten bleiben mir?

      Ich könnte das "Header-Kolonnen-Footer" Konstrukt in eine Tabelle setzen. Glaube aber nicht dass dies eine sehr elegante Lösung ist, oder? Lasse mich gerne eines Besseren belehren .

      Daniel

      Kommentar

      • #4
        Nein, mit Tabellen wollen wir gar nicht wieder anfangen.

        Hättest du ein Problem mit absoluter Positionierung? Wenn nicht kannst du das damit prima erledigen.

        Edit: wenn der Footer breit genug ist, rutscht er sowieso runter und muss nicht gecleart werden. Hast du es schon so versucht?
        [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
        Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
        Super, danke!
        [/COLOR]

        Kommentar

        • #5
          Ok gerne, weiss allerdings nicht wie ich das angehen soll.

          Die gesamte Breite der Seite ist dynamisch (passt sich an Fenstergrösse an).
          Die höhe der beiden Kolonnen sollte sich dem Inhalt anpassen.

          Genau dort würde ich dann Probleme mit der absoluten Positionierung bekommen, oder? Ich verliere ja die Information, wie breit das Content div gerade ist.

          Daniel
          Zuletzt geändert von dduton; 17.02.2010, 20:11.

          Kommentar

          • #6
            Such mal nach liquid columns. Das sollte dein Problem beheben.

            Peter
            Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
            Meine Seite

            Kommentar

            • #7
              Schaue mir das jetzt genauer an.
              Melde mich Morgen zurück.

              Vielen Dank erst mal

              Daniel

              Kommentar

              • #8
                Zitat von dduton Beitrag anzeigen
                Genau dort würde ich dann Probleme mit der absoluten Positionierung bekommen, oder?
                Eigentlich nicht. Absolute Positionierung kann man auch prozentual angeben. Das Wort "absolut" heißt in dem Falle nur, dass sich das Element nicht mehr im Flow befindet, sondern vom Designer frei positioniert werden kann.
                [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
                Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
                Super, danke!
                [/COLOR]

                Kommentar

                • #9
                  Zitat von AmicaNoctis Beitrag anzeigen
                  Floats kann man zwar verschachteln, aber ein clear wirkt sich immer auf alle Floats aus
                  Nein, nicht auf floats in anderen block formatting contexts.
                  I don't believe in rebirth. Actually, I never did in my whole lives.

                  Kommentar

                  • #10
                    @wahsaga:
                    Habe jetzt mal "Block Formatting Context" nachgeschlagen.
                    Und bin dann auf diese Seite gestossen klick.
                    Um einen neuen "Block Formatting Context" zu starten muss man also ein bestimmtes Attribut setzen. Habe meinem Content div jetzt das "overflow: auto" hinzugefügt und tada es funktioniert.

                    Hier die finale Lösung:
                    PHP-Code:
                    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
                    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"                    >
                    <                    html xmlns="http://www.w3.org/1999/xhtml">
                    <                    head>
                    <                    title>Conforming XHTML 1.1 Template</title>
                    </                    head>
                    <                    body>

                    <!--                     Menu -->
                    <                    div style="float: left; width: 100px; background-color: #F00;">
                                            Left Col<br />
                                            Left Col<br />
                                            Left Col<br />
                                            Left Col<br />
                                            Left Col<br />
                                            Left Col<br />
                                            Left Col<br />
                                            Left Col<br />
                                            Left Col<br />
                                            Left Col<br />
                                            Left Col<br />
                    </                    div>

                    <!--                     Content -->
                    <                    div style="background-color: #F39; margin: 10px; margin-left: 120px; overflow: auto;">

                    <!--                     Header -->
                    <                    div style="background-color: #0F0; margin: 10px;">
                                            Header
                    </div>

                    <!--                     2 Kolonnen -->
                    <                    div style="float: left; width: 40%; background-color: #999; margin: 10px;">
                                            Col1
                    </div>
                    <                    div style="float: left; width: 40%; background-color: #CCC; margin: 10px;">
                                            Col2<br />
                                            Col2<br />
                                            Col2<br />
                    </                    div>

                    <!--                     Footer -->
                    <                    div style="background-color: #0FF; clear: both; margin: 10px;">
                                            Footer
                    </div>

                    </                    div>

                    </                    body>
                    </                    html> 
                    @Kropff:
                    Die "Fluid Columns" werde ich mir aber auch noch anschauen, man kann nur dazulernen

                    @AmicaNoctis:
                    Stimmt, prozentual würde eventuell funktionieren. Habs jetzt mit "overflow: auto" gelöst.

                    Ich bedanke mich nochmal an alle die mir geholfen haben.

                    Daniel

                    Kommentar

                    Vorherige template Weiter
                    Lädt...
                    X