w3ksel: Vertikal mitwachsendes Leer-Div

Hallo Selfhtml-Runde,

das Problem ist mir bereits öfter untergekommen, nur eine saubere Lösung ist mir bisher leider nicht begegnet. Über einen Ansatz, bezw. einen Anstoß wonach genau ich Ausschau halten müsste würde ich mich freuen.

Folgendes Szenario:

Ein Eltern-Div umschließt mehrere Kinder-Divs. Das Eltern-div besitzt keine feste Höhe, es wächst entsprechend den Inhalten mit (Variable Inhalte / Schriftgröße).

Die Kinder-Divs stellen die Spalten dar (Navigation, Content, "dritte Spalte" für Zusätze).

Das Problem: Wie bringe ich die Kinder-Divs dazu, die variable Höhe des Eltern-Divs anzunehmen (ohne Javascript, Einsatz von Tabellen etc.)? Insbesondere bei Variabler Schriftgröße?

Mein Ansatz waren prozentuale Angaben, der Safari mochte dies jedoch nur bei gesetzter Höhe, selbst Mindesthöhe war für ihn inakzeptabel.

Workarounds gibt es sicherlich mittels wiederholenden Hintergrundbildern etc. Nur eine direkte Lösung beziehungsweise sauberer Lösungsweg, der würde mich schon mal interessieren.

Code kann ich zur Veranschaulichung gerne schreiben, gehe aber davon aus, dass die Problembeschreibung ausreicht um das Szenario zu verstehen.

Gruß,
w3ksel

  1. Hi,

    Folgendes Szenario:

    Ein Eltern-Div umschließt mehrere Kinder-Divs. Das Eltern-div besitzt keine feste Höhe, es wächst entsprechend den Inhalten mit (Variable Inhalte / Schriftgröße).

    das sieht natürlich zunächst mal nach einer typischen "DIV-Wüste" aus... ;-)

    Workarounds gibt es sicherlich mittels wiederholenden Hintergrundbildern etc. Nur eine direkte Lösung beziehungsweise sauberer Lösungsweg, der würde mich schon mal interessieren.

    Die gibt es nicht, da es außer bei Tabellen(eigenschaften) gar keine "Spalten" gibt.
    Und da über CSS definierte Tabelleneigenschaften noch nicht von allen relevanten Browsern unterstützt werden, bleibt Dir nur einer dieser Workarounds oder eben eine echte Tabelle.

    freundliche Grüße
    Ingo

    1. Hey Ingo,

      was wäre deine Alternative zur 'Div-Wüste'? Ein reines Tabellen-Layout möchte ich ungern verwenden. Bisher basiert das klassische Grundgerüst bei mir auf 4-6 Divs (Wrapper, Header, 2-3 Spalten, ggf. Footer). Für einen Denkanstoß bin ich gern zu haben ;)

      Gruß,
      w3ksel

      1. Hi,

        Bisher basiert das klassische Grundgerüst bei mir auf 4-6 Divs (Wrapper, Header, 2-3 Spalten, ggf. Footer).

        Ohne den Inhalt dieser Elemente zu kennen, kann ich Dir nur den generellen Rat geben, die zu den Inhalten passenden Elemente zu verwenden. Beinhaltet der Header z.B. die Seitenüberschrift, dann wäre h1 angebracht. Der Footer könnte evtl. ein p sein.

        freundliche Grüße
        Ingo

  2. Hi w3ksel,

    wie gerade schon gesagt wurde: eine "direkte" Lösung gibt es dafür nicht. Es gibt aber IMHO elegantere als das von dir angedeutete Faux Columns (wiederholende Hintergrundbilder).

    Nämlich Multi-Column Layouts Climb Out of the Box (English only, sorry).

    Gruß
    Antipitch

    1. Hiho,

      wie gerade schon gesagt wurde: eine "direkte" Lösung gibt es dafür nicht. Es gibt aber IMHO elegantere als das von dir angedeutete Faux Columns (wiederholende Hintergrundbilder).

      Nämlich Multi-Column Layouts Climb Out of the Box (English only, sorry).

      Ja? Wo finde ich also in dem von Dir verlinkten Artikel ueber Faux collumns nun eien Link oder aehnliches der zu dieser Methode fuehrt?

      1. Hi Steel,

        Ja? Wo finde ich also in dem von Dir verlinkten Artikel ueber Faux collumns nun eien Link oder aehnliches der zu dieser Methode fuehrt?

        berechtigte Frage ;-)

        Korrektur: Multi-Column Layouts Climb Out of the Box

        Gruß
        Antipitch

        1. Hey Antipitch,

          vielen Dank für den Ansatz, werde es mir gleich mal ansehen. Da du die 'Div-Wüste' ansprichst - was wäre dein Alternativ-Vorschlag für die Basis einer Website? Ich liege bisher meist bei 4-6 Divs (Wrapper, Header, 3 Spalten, Footer) bei einem klassischen Grundgerüst.

          Englisch sollte denke ich nicht das Problem darstellen ;)

          Gruß,
          w3ksel

          1. Hallo.

            Da du die 'Div-Wüste' ansprichst - was wäre dein Alternativ-Vorschlag für die Basis einer Website? Ich liege bisher meist bei 4-6 Divs (Wrapper, Header, 3 Spalten, Footer) bei einem klassischen Grundgerüst.

            Versuche einfach, möglichst viele der ohnehin zum Einsatz kommenden Elemente zu verwenden.
            MfG, at