Tabellenlayout <div> / CSS

  • Ich möchte folgendes erreichen in Es sol ein zweispaltiges Layout erstellt werden, hierbei soll links und rechts ein grafischer Rand mit angezeigt werden. Der Inhalt von leftconent und der Inhalt von rightcontent sollen unabhängig von ihrem Inhalt gleiche Höhe haben.

    So sieht es im Augenblick bei mir aus

    Code
    <div id="content"><div class="borderright"><div id="innercontent"><div id="rightcontent"> 
       [img]logo.jpg[/img]
    </div>
      <div id="leftcontent">
         Hier steht der linke Text 
      </div></div>
    </div></div>
    </body>

    Im IE wird es korrekt dargestellt. Nur im Firefox wird

    1. der rechte Rand nur ein Teil dargestellt
    2. die Höhe von rightcontent und leftcontent wird nur über die Höhe einer Zeile und nicht über die Höhe des Images dargestellt.

    Was muss ich machen, damit obiges in beiden Browsern (IE und Firefox) gleich dargestellt wird?

    Danke für eure Hilfe

  • Wenn ich aber die Höhe nicht weis. z.B. bei dynamischen Inhalten? height:100% habe ich ausprobiert

  • Ich bin hier echt am verzweifeln. Ich habe mir den Text 3 mal durchgelesen, um Ihn zu verstehen, nur mein Problem wurde hierdurch nicht gelöst. Ich habe dieses faux-columns-Trick nicht verstanden. Wie kann ich dieses auf mein Problem anwenden?

    Schon mal herzlichen Dank für eure Hilfe.

  • Du müsstest mit einem Grafikprogramm eine kleine Grafik erstellen (ca. 5-10px Höhe reichen aus).
    Diese Grafik müsste im Querschnitt von links nach rechts so aufgebaut sein, dass sie den Farben und den Breiten deiner jeweiligen Container entspricht.
    Diese Grafik bindest du dann als background-image in deine content-Box ein.
    Ist nicht ganz einfach, aber eben halt auch nur eine Hilfslösung, weil sich mit CSS die Spalten nicht automatisch anpassen.
    Oder du gibst allen Spalten die gleiche Höhe und musst dann eben immer kontrollieren, ob der Inhalt nicht "zu lang" wird.