innere Box soll immer vollständige Höhe ausnutzen

[mop773]

Hallo zusammen,
ich habe folgendes Problem:

Ich habe eine Box, in dieser sind wieder 2 Boxen nebeneinander, in der
linken sind Grafiken drin, in der rechten Text. Die Hintergrundfarbe der linken ist: background-color:#393FDC;

Die Anzahl der Bilder in der linken Spalte, aber auch die Länge des Texts in der rechten variieren immer, wenn ich allerdings wenig Bilder und viel Text haben, wird die linke Box nicht bis zum unteren Rand dargestellt, ich möchte aber immer, das sie min genauso lang ist wie die  rechte Box. Mit dem Befehl: "height:100%" hat es nicht funktioniert.

Hoffe das ihr mir helfen könnt.

[mop773]

Hier noch der zugehörige Css-Code:

Dies ist die Hauptbox:

.box_art {
width:600px;
font-size:11px;
background-color:#ffffff;
float:left;
}

Hier die innere linke Box:

.box_art_1 {
         margin-left:5px;
         float:left;
         background-color:#393FDC;
         width:200px;
}

Hier die innere rechte Box:

.box_art_2 {
         float:left;
         width:380px;
}

[Ingo Turski]

Hi,

ich möchte aber immer, das sie min genauso lang ist wie die  rechte Box.

Du hast offensichtlich noch nicht in die Selfhtml-Doku gesehen; sonst wäre Dir http://de.selfhtml.org/css/layouts/mehrspaltige.htm#hintergrund aufgefallen - insbesondere die Passage »Erläuterung: Da nebeneinander platzierte Elemente sich nicht in ihrer Höhe beeinflussen [...]«

freundliche Grüße
Ingo

[mop773]

krass, was fürne Lösung, es funktioniert perfekt!! Vielen Dank!!

[Christian]

Hi,

du hast wohl das selbe Problem wie hier:
< http://forum.de.selfhtml.org/?t=107616&m=668572>

Gunther hat einen sehr guten Link gepostet:
< http://webhost.bridgew.edu/etribou/layouts/skidoo/demos/bgImages.html>

Die Idee ist, dass man mehrere DIVs ineinander schachtelt, und dem mittleren links padding gibt und rechts margin. (jeweils breite der spalten). Den geschachtelten DIVs gibt man dann verschiedene hintergründe und die spalten haben dann automatisch den Hintergrund, den sie haben sollen, egal welche spalte die höchste ist.
Dann muss man die noch verschieben, die äußeren spalten, durch negativen margin.

Hier wird etwas anders vorgegangen:
< http://webhost.bridgew.edu/etribou/layouts/skidoo/index.html>
Das gefällt mir nicht so gut. Die mittlere Spalte bekommt border mit der Breite der äußeren Spalten... irgendwie so. Klappt auf jeden Fall nicht mit background-images.

Die erste Variante hab ich mal nachgebaut (nicht 100%, nur das wesentliche):
< http://www.media2c.de/csstest.html>
(ist vielleicht etwas übersichtlicher)
konnte auch was weglassen, und klappt trotzdem.
getestet unter IE 6 und Firefox.

habs gut kommentiert denke ich.
CSS ist hier:
< http://www.media2c.de/csstest.css>

Gruß
Christian

[mop773]

Hey, vielen dank für deine Antwort, ich habe mir die anderen
Lösungen mal angeschaut und finde sie sehr interessant.

Mit dem Hintergrundbild ist es wirklich keine saubere Lösung
und wirft früher oder später Probleme auf, ausserdem ises
irgendwie gegen die Css-Philosophie, da mans nicht leicht
ändern kann. Dennoch werde ich, zumindest vorerst, bei meiner
Lösung bleiben. Trotzdem vielen dank für die Mühe