[CSS] 2 Boxen nebeneinader - aber beide relativ zum parent

[michael.sprick]

Hi ihr,

ich habe ein kleines Problem mit CSS. In einem div-Container platziere ich 2 weitere Boxen nebeneinander. Der übergeordnete Container hat einen Rahmen und soll mit seinem Inhalt mitwachsen. (siehe Anhang)
Allerdings ist nie ganz sicher, welche der beiden innenliegenden Boxen die größere wird. Wächst die rechte Box, geht alles ohne Probleme, wird die linke größer, so überlappt sie sofort den Container. Wie bekommt man sowas in den Griff?

Folgendes CSS gehört zum Layout:



#container {
position: relative;
background: #c4c4c4;
border: 2px solid black;
width: 500px;
}

#spalte1 {
position: relative;
width: 100px;
float: left;
}

#spalte2 {
position: relative;
width: 300px;
margin-left: 110px;
}


vielen Dank für jeden Hinweis

Michael :)

[Qudus]

Wenn Du willst ,dass die Boxen mit ihrem Inhalt mitwachsen, solltest Du anstatt 'width' lieber 'min-width' verwenden. Ich denke, das ist das, was Du erreichen willst. Du willst, dass die Boxen eine initiale (mindest-)Größe haben und dann ggf. größer werden, wenn der Inhalt größer wird. (Ich weiss nur nicht, ob der 'Herr IE' das vielleicht mal wieder nicht interpretieren möchte!)

Oder es geht Dir um die Höhe, dann ist Dein code schon korrekt. Ich bin mir nur nicht ganz sicher wegen der relativen Positionierung. Ist das wirklich nötig? Wenn mich nicht alles täuscht... versuch mal die Positionierung der inneren Boxen auf default zu lassen (also die entsprechende Zeile wegzulassen), wenn Du überhaupt soeine Positionierung brauchst.

Qudus

[michael.sprick]

Hi Qudus,

Ja, es ging mir um die Höhe der Boxen. Leider bringt das Weglassen der position:relative Angabe keine Änderung.
Die Box, die das float-Attribut gesetzt hat kann den übergeordneten Rahmen nicht vergrößern. Die jeweils andere schon. Ich habe das jetzt erstmal so gelöst, dass ich im Skript die benötigte Höhe beider Boxen berechne. Sollte #spalte1 höher werden als #spalte2, setze ich den Wert für height in #spalte2 einfach entsprechend... reicht erstmal ;)

Was das min-height / min-width betrifft, so kann der IE das glaubich nicht. Aber wer nutzt den schon ;)

Danke und Gruß,

michael

[BlueJay]

Hi Qudus,
Was das min-height / min-width betrifft, so kann der IE das glaubich nicht.

Stimmt!


Aber wer nutzt den schon ;)

Über 80% der Leute, die auf unsere Seiten hereinschneien...

Deshalb würde ich für dieses Konstrukt Tabellen nehmen, die funktionieren zuverlässig ohne Code-Klimmzüge.

So long,
BlueJay