CN: Zweispalten ohne Tabelle

Hallo,

ich habe bis dato mit Tabellen-Layouts gearbeitet. Nun habe ich angefangen mit "div" Containern zu arbeiten und so meine Schwierigkeiten, die ich bis jetzt aber alle gelöst habe.

Nun habe ich aber ein Problem was sich nicht beseitigen lassen möchte, zumindest von mir anscheinend nicht.^^
Ich versuche 2 Spalten zu erzeugen wobei die erste Spalte nur eine Beschriftung für die 2. darstellt und die 2. mit einem Text von variabler Länge gefüllt wird.

Ich habe nun schon mittels float versucht Spalte 1 umfließen zu lassen aber da Spalte 2 immer mit mehr Text gefüllt ist "fällt" dieser immer wieder in die erste Spalte.
Habe es auch schon mittels einer genauen Positionierung, "position", "left" und "top", versucht aber da ist Spalte 2 über den rechten Rand ausgebrochen.
Auch wurde dies bei verschiedenen Auflösungen mehr als schlecht dargestellt.

Derzeitiger Grund-Code:

<div style="width:100px;float:left;">Info:</div>  
    <div>'.nl2br(htmlspecialchars($row['info'], ENT_QUOTES)).'</div>

Vielleich kann mir hier jemand Hinweise geben oder anderweitig Vorschläge zur Problemlösung unterbreiten, ich steh jedenfalls gerade wie das Schwein vor der Kirche.

  1. Vielleich kann mir hier jemand Hinweise geben oder anderweitig Vorschläge zur Problemlösung unterbreiten, ich steh jedenfalls gerade wie das Schwein vor der Kirche.

    Du brauchst einen block formating Kontext, der mittels overflow:hidden oder overflow:auto erreicht werden kann.

    Für einen anderen Ansatz siehe
    https://forum.selfhtml.org/?t=187739&m=1248546

    mfg Beat

    --
    ><o(((°>           ><o(((°>
       <°)))o><                     ><o(((°>o
    Der Valigator leibt diese Fische
    1. Du brauchst einen block formating Kontext, der mittels overflow:hidden oder overflow:auto erreicht werden kann.

      Danke, "overflow:auto" hat funktioniert da ja "Div" schon von vornherein ein Blockelement ist.

      Zur verdeutlichen wie es aussehen sollte und jetzt auch sieht:

      Info:     Eine schöne Beschreibung,
                zu einem schönen Produkt
                und die bei schönem Wetter.

      vorher war es:

      Info:     Eine schöne Beschreibung,
      zu einem schönen Produkt
      und die bei schönem Wetter.

      1. Danke, "overflow:auto" hat funktioniert da ja "Div" schon von vornherein ein Blockelement ist.

        Zur verdeutlichen wie es aussehen sollte und jetzt auch sieht:

        Info:     Eine schöne Beschreibung,
                  zu einem schönen Produkt
                  und die bei schönem Wetter.

        Für eine solche Struktur sind Definitionslisten imho besser geeignet als Divs. Durch die Definitionsliste gibt es eine semantische Zuordnung zwischen dem Punkt links und dem dazugehörigen. Per CSS kannst du den Term (links) und die Definition (rechts) dann nebeneinander anordnen.

        Gruß

        Stareagle

  2. Hallo,

    Nun habe ich aber ein Problem was sich nicht beseitigen lassen möchte, zumindest von mir anscheinend nicht.^^
    Ich versuche 2 Spalten zu erzeugen wobei die erste Spalte nur eine Beschriftung für die 2. darstellt und die 2. mit einem Text von variabler Länge gefüllt wird.

    Hmm, ich kann mir nicht so ganz vorstellen, wie das aussehen soll. Ein Skizze wäre eventuell hilfreich.

    Gruß

    Stareagle