Problem mit 2 verschachtelten floats

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #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
    Tags: 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]

    Comment

    • #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

      Comment

      • #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]

        Comment

        • #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
          Last edited by dduton; 17-02-2010, 19:11.

          Comment

          • #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

            Comment

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

              Vielen Dank erst mal

              Daniel

              Comment

              • #8
                Originally posted by dduton View Post
                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]

                Comment

                • #9
                  Originally posted by AmicaNoctis View Post
                  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.

                  Comment

                  • #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

                    Comment

                    Previous template Next
                    Working...
                    X