Spalten gleich groß machen

Hallöschen,

ich sitz jetzt seit knapp 4 Stunden an nur einem Problem:

Ich möchte, dass 2 Div’s die gleiche Höhe haben.

Skizze:

[attachment=0]Unbenannt-1.jpg[/attachment]

Der Quellcode:

[code]#feld{
width: 700px;
background-image: url(img/bg_content.png);
min-height: 716px;
background-attachment: scroll;
}

#widget{
width: 250px;
height: 100%;
float:right;
background-image: url(img/bg_content.png);
}

#inhalt{
width: 80%;
margin: auto auto auto auto;
min-height: 100%; /* Mindesthöhe für moderne Browser /
height:auto !important; /
Important Regel für moderne Browser */
}[/code]Habt ihr eine Idee?

Viele liebe Grüße

Gängigstes Stichwort zu der Problematik (schon seit Jahren): Faux Columns.

Alternativ für moderne Browser: Die display:table-Varianten verwenden.

Unter ohne-css.gehts-gar.net/demo/0005c.html ist nur der Hintergrund geändert worden, damit das so aussieht, als ob es so wäre.

Gibt es noch andere Varianten?

schau doch mal hier bzw. hier

Hm komischerweise klappt das alles bei mir nicht :frowning:

Hatte noch das gerade ausprobiert: webstylez.net/Floatende-Divs-gleich-hoch-machen/
Aber das das Padding wird nicht “zurück” genommen, d.h. es ist dann 32768px groß.

Hmm, könnte es an den eingebundenen Bildern liegen? Habe ein ähnliches Problem bei meinem Entwurf für mein neues Joomla-Template, aber es erstmal irgendwie gelöst und mich anderen Dingen zugewendet. Aber wäre schon toll, wenn es da ne gute Lösung gäbe.

Also ich habe jetzt mit einem Kumpel geredet.

Er meinte, dass man folgendes ergänzen kann:

div#inhalt { display:table-row; } div#feld, div#widget { display:table-cell; }

Ich habs noch nicht getestet, mach es aber dann heute Abend.

Eine andere Möglichkeit ist, dass man die beiden Container vergrößert und dann wieder verkleinert:

#inhalt { padding-bottom: 1000px; margin-bottom: -1000px; } #widget { padding-bottom: 1000px; margin-bottom: -1000px; } #inhalt { overflow: hidden; }

Das hat nun doch bei mir funktioniert.

Liebe Grüße