Adrian: Layout: rechte und linke gefloatete Spalte verlängern

SELF-Forum

Layout: rechte und linke gefloatete Spalte verlängern

Adrian
– Informationen zu den Bewertungsregeln

Hallo!

Wenn ich ein dreispaltiges Layout habe, also:

----------Header----------

Navi-----Content----- Navi
left-----------------right

----------Footer----------

und Navileft und Naviright sind jeweils gefloatet,
wie kann ich dann die Spalten jeweils bis zum Footer verlängern,
wenn der Content länger ist als die Navispalten?

Bsp:
Content-Höhe ist 300px (durch Geschriebenes, ist variabel)
Navileft-Höhe ist 200px (durch Geschriebenes, ist auch variabel)
Naviright-Höhe ist 250px (durch Geschriebenes, ist wiederum variabel)

Das ganze muss flexibel sein, da sich die Inhalte der jeweiligen Bereiche verändern...

Ich habe schon mit height: auto; / height: 100%; rumgespielt,
was allerdings alles nicht geklappt hat, er hat jeweils nur bis
zum Ende der Inhalte angezeigt...

Wie kann ich jetzt die Beiden Navis mit height o.ä. bis zum Footer runterziehen?

Mit freundlichen Grüßen,
Adrian

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Layout: rechte und linke gefloatete Spalte verlängern

    Adrian
    – Informationen zu den Bewertungsregeln

    Hallo!

    Hallo!

    Wenn ich ein dreispaltiges Layout habe, also:

    ----------Header----------

    Navi-----Content----- Navi
    left-----------------right

    ----------Footer----------

    und Navileft und Naviright sind jeweils gefloatet,
    wie kann ich dann die Spalten jeweils bis zum Footer verlängern,
    wenn der Content länger ist als die Navispalten?

    Bsp:
    Content-Höhe ist 300px (durch Geschriebenes, ist variabel)
    Navileft-Höhe ist 200px (durch Geschriebenes, ist auch variabel)
    Naviright-Höhe ist 250px (durch Geschriebenes, ist wiederum variabel)

    Das ganze muss flexibel sein, da sich die Inhalte der jeweiligen Bereiche verändern...

    Ich habe schon mit height: auto; / height: 100%; rumgespielt,
    was allerdings alles nicht geklappt hat, er hat jeweils nur bis
    zum Ende der Inhalte angezeigt...

    Wie kann ich jetzt die Beiden Navis mit height o.ä. bis zum Footer runterziehen?

    Mit freundlichen Grüßen,
    Adrian

    wo liegt das problem? keiner online? glaub ich nich... ;)
    wenn etwas unklar ist, fragt bitte.

    Mit freundlichen Grüßen,
    Adrian

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Layout: rechte und linke gefloatete Spalte verlängern

      Der Martin
      – Informationen zu den Bewertungsregeln

      Hallo Adrian,

      wo liegt das problem? keiner online? glaub ich nich... ;)
      wenn etwas unklar ist, fragt bitte.

      das Problem? Das fragst du??
      Wenn alles klar ist, dann mach doch einfach!  ;-)

      Nee, das Problem ist, dass du Elemente, die voneinander unabhängig sind, in eine Beziehung bringen willst. Und das geht so ohne weiteres nicht.

      Hmm, eventuell mit einm div-Container um alle drei Boxen? Dann müsste sich height:100% der linken und der rechten Box auf das äußere Container-div beziehen, das mit dem Inhalt in der Mitte wächst...
      Aber das ist jetzt bloß so ins Unreine gedacht und ungetestet!

      So long,

      Martin

      --
      Zwischen Leber und Milz
      passt immer noch'n Pils.
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Layout: rechte und linke gefloatete Spalte verlängern

        Adrian
        – Informationen zu den Bewertungsregeln

        Hallo!

        Hmm, eventuell mit einm div-Container um alle drei Boxen? Dann müsste sich height:100% der linken und der rechten Box auf das äußere Container-div beziehen, das mit dem Inhalt in der Mitte wächst...
        Aber das ist jetzt bloß so ins Unreine gedacht und ungetestet!

        Mist, soweit hab ich schon gedacht, einen div-container drum zu machen,
        aber vergessen, weiterzudenken... ^^ danke, ich probiers mal aus

        Mit freundlichen Grüßen,
        Adrian

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Layout: rechte und linke gefloatete Spalte verlängern

          Adrian
          – Informationen zu den Bewertungsregeln

          Hallo!

          funktioniert leider nicht.... :/

          Mit freundlichen Grüßen,
          Adrian

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Layout: rechte und linke gefloatete Spalte verlängern

            KILLHILL
            – Informationen zu den Bewertungsregeln

            Hallo!

            funktioniert leider nicht.... :/

            Mit freundlichen Grüßen,
            Adrian

            Hi

            Der Ansatz ist zwar nicht ganz der Falsche, aber so geht es dann doch nicht. Das ganze funzt so leider nur im IE, in Firefox und Opera geht es weiterhin nicht.

            Eine Lösung kannst du hier lesen:
            http://www.alistapart.com/articles/fauxcolumns

            Sie besteht im Grunde aus einem simplen Hintergrundbild, welches sich über die alles einfassende Box bis nach unten zieht.

            Grüße
            KILLHILL

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

  2. Layout: rechte und linke gefloatete Spalte verlängern

    Ashura Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo Adrian.

    und Navileft und Naviright sind jeweils gefloatet,
    wie kann ich dann die Spalten jeweils bis zum Footer verlängern,
    wenn der Content länger ist als die Navispalten?

    Mit ein wenig Aufwand ist dies durchaus möglich:

    http://sandbox.mikepurvis.com/css/bordercolumn/three.php

    http://www.456bereastreet.com/archive/200405/equal_height_boxes_with_css/

    http://interllectual.com/coffee/flexible-equal-height-boxes-css-and-javascript-methods

    (Meine Suchbegriffe.)

    Einen schönen Sonntag noch.

    Gruß, Ashura

    --
    Last Tears Keep Calling
    See Angels Falling
    Black Shadows In Your Head
    And One Eye For The Dead
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln