Drei Divs mit gleicher Höhe versehen

[Margin-Auto]

Hi,

bin gerade dabei, eine Seite von Tabellen- auf CSS-Layout umzustellen. Diese hat - wie exotisch - ein dreispaltiges Layout.
Diese drei Spalten hab ich mit drei Divs realisiert. Damit sie jetzt auch schön alle die gleiche Höhe haben (also alle Spalten so hoch sind, wie die mit dem meisten Inhalt) habe ich sie in einen weiteren Div gepackt und die Höhe auf 100% gesetzt. Ich dache, so nimmt der Über-Div die Höhe der größten Spalte an und die Unter-Divs 100% der Höhe ihres Elternelements.

Aber nix da. IE und Opera machen alle Divs gerade nur so hoch, dass ihr jeweiliger Inhalt passt. In Mozilla funktioniert es so weit, allerdings werden Inhalte, nach dem Div auf Höhe des unteren Bildschirmrandes hinter den Divs angezeigt.

Unter http://insel.heim.at/mainau/331868/ kann man das sich mal anschauen. (Wenn man sich das vom Hoster eingefügte JS am Schluß wegdenkt, ist die Seite auch valide)

Wo liegt mein Fehler, oder wie kann ich sonst die drei Divs gleich hoch machen.

TIA

Margin-Auto

[Avalon]

So sollte es besser gehen:

#mittlerespalte{
      float:left;
      width:54%;
      height:100%;
      overflow:auto;
}

Gruß
Avalon

[Margin-Auto]

Hi,

overflow:auto;

Danke für die Hilfe, aber das beseitigt auch nur das Problem in Mozilla und auch das nicht auf die Art und Weise, wie ich es will. Im IE und Opera ändert sich nix. Der Div soll sich einfach so lang machen, dass sein gesamter Inhalt reinpasst, wie eine Tabellenzelle.

Margin-Auto

PS: Ist das normal, das das Textfeld hier zum Posten nur drei Zeilen hoch wird, sobald man die Breite über die Einstellungen anpasst? *kopfeinzieh*

[Avalon]

Danke für die Hilfe, aber das beseitigt auch nur das Problem in Mozilla und auch das nicht auf die Art und Weise, wie ich es will. Im IE und Opera ändert sich nix. Der Div soll sich einfach so lang machen, dass sein gesamter Inhalt reinpasst, wie eine Tabellenzelle.

Dann hilft wohl nur noch Javascript um die divs auf gleiche Höhe zu setzen:

function setheight()
    {
    ziel = document.getElementById("disc").getElementsByTagName("div");
    for(var a=0; a<ziel.length-3; a+=3)
         {
         which = ziel[a];
         if(!document.all)
             {
             h0 = document.defaultView.getComputedStyle(which,'').getPropertyValue('height');
             h1 = document.defaultView.getComputedStyle(which.nextSibling.nextSibling,'').getPropertyValue('height');
             h2 = document.defaultView.getComputedStyle(which.nextSibling.nextSibling.nextSibling.nextSibling,'').getPropertyValue('height');
             }
         else if(opera == -1)
             {
             h0 = which.offsetHeight+20;
             h1 = which.nextSibling.offsetHeight+20;
             h2 = which.nextSibling.nextSibling.offsetHeight+20;
             }
         else
             {
             h0 = which.offsetHeight;
             h1 = which.nextSibling.nextSibling.offsetHeight;
             h2 = which.nextSibling.nextSibling.nextSibling.nextSibling.offsetHeight;
             }
         hmax = Math.max(parseFloat(h0),parseFloat(h1),parseFloat(h2))-12;
         which.style.height = hmax+"px";
         }
    }

auf das klammernde div kannst Du dann verzichten.

Gruß
Avalon

[Tobias Kloth]

Hallo,

PS: Ist das normal, das das Textfeld hier zum Posten nur drei Zeilen hoch wird, sobald man die Breite über die Einstellungen anpasst? *kopfeinzieh*

nein, das ist imho ein Bug, ich habe ihn mal unter http://bugs.selfhtml.org/bug.php?op=show&bugid=320 gemeldet. Als Abhilfe musst du eben (bis der Fehler behoben ist) für die Höhe auch einen Wert angeben (wenn du den Standardwert willst, kannst du ja den eingeben).

Grüße aus Nürnberg
Tobias

[Ingo Turski]

Hi,

Der Div soll sich einfach so lang machen, dass sein gesamter Inhalt reinpasst, wie eine Tabellenzelle.

Das ist halt der Unterschied zwischen Containern und Tabellen. Nebeneinander gesetzte Container stehen nicht in einem Verhältnis zueinander wie Tabellenspalten; oder anders gesagt: es gibt hier keine Spalten und Du kannst folglich auch solche Effekte wie bei Tabellen nur mit gleichen - festen - Höhenangaben oder halt Tricks wie Hintergrundfarben oder Javascript erzielen.
Überlege Dir, ob dieser Effekt wirklich nötig ist und wenn ja, dann solltest Du mMn bei der Tabelle bleiben.

freundliche Grüße
Ingo

[Margin-Auto]

Hi,

Das ist halt der Unterschied zwischen Containern und Tabellen. Nebeneinander gesetzte Container stehen nicht in einem Verhältnis zueinander wie Tabellenspalten;

Hmf. Das scheint ja alles nicht so einfach zu sein, wie ich das gehofft hatte. :-(
Dennoch Danke an alle Antworter, ich werde mir die Links von nag mal genauer ansehen.

Margin-Auto

[Ingo Turski]

Hi,

Hmf. Das scheint ja alles nicht so einfach zu sein, wie ich das gehofft hatte. :-(

stimmt einerseits, aber das Konzept ist ja auch ein ganz anderes. So wie Tabellen für tabellarische Daten gedacht sind, erfüllen andere Elemente wie DIVs eben keine tabellarischen Funktionen. Und wenn man sich nicht auf ein bestimmtes tabellenartiges Layout versteift, kann man mit CSS sehr gut und einfach arbeiten.

freundliche Grüße
Ingo

[nag]

Hallo,

bin gerade dabei, eine Seite von Tabellen- auf CSS-Layout umzustellen.

Damit machsten du einen Schritt in die richtige Richtung.

Diese drei Spalten hab ich mit drei Divs realisiert.

Eine Grundregel für ein CSS-basierendes Layout:

• löse dich auch gedanklich vom Tabellenlayout

Eine 1 zu 1 Umsetzung sollte nicht das Ziel sein.
Du musst Kompromisse eingehen.

drei Divs gleich hoch machen.

Hier findest du ein Beispiel für ein 3spaltiges Layout.
Die gleiche Spalten-Höhe entstehen durch einen "optischen Trick".

http://www.tanfa.co.uk/css/layouts/css-3-column-layout-v2.asp

http://www.positioniseverything.net/ (scroll runter bis zur Überschrift "Layout Demo")

mfg NAG