Spalten gleich groß machen

Webdesign & Technik HTML & CSS
1

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

2

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

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

3

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?

4

schau doch mal hier bzw. hier

5

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ß.

6

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.

7

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