Exquisites Problemchen

[Crashdown]

Hallo,
habe ein Problemchen das in wenigen Worten zu beschreiben so schwer ist, dass man es
vergessen kann über die Forensuche eine Lösung zu finden wie ich leider feststellen musste.

Es geht um folgendes:

Auf einer Beispielseite habe ich den Parentdiv:

Code: Alles auswählen

<div style='border:solid black 1px;position:absolute;margin-left:-400px; width:800px;left:50%;padding:0px;'>

Darin einen Anderen am Linken Rand:

Code: Alles auswählen

<div style='border:solid red 1px;position:relative;left:0px; width:200px; height:100px;bottom:0px;top:0px;float:left;'></div>

und nun soll der Platz rechts daneben mit weiteren Divs gefüllt werden:

Code: Alles auswählen

<div style='border:solid blue 1px;position:relative;height:20px;float:right;'></div>

die wie auch der rote Div
den Parentdiv mitwachsen lassen sollte sich ihre Zahl erhöhen. An sich kein Problem, was mir
aber Probleme bereitet ist, dass diese wenn möglich in der Breite den vollen zur verfügung stehenden Platz einnehmen sollen. In diesem Beispielfall wäre das 600px; der Parentdiv variiert später dann aber in seiner Breite je nach breite des Userbildschirmes.
Als Ergebnis stelle ich mir vor, dass der Parentdiv in seiner Höhe sowohl von der Höhe des roten
Div, als auch von der Anzahl der blauen Divs abhängt und dem entsprechend mitwächst.
Mit einer einfachen Lösung(was javascript ja nicht unbedingt ausschliesen muss) wäre ich doch
ziemlich zu begeistern
Danke schonmal für eure Bemühungen.

[sejuma]

Ich versuch mich mal, ans Thema dranzumachen, möglicherweise sind dann noch einige Punkte offen:

Die Zentrierung des Parentdiv solltest du anders vornehmen. Absolute Positionierungen führen dazu, dass je nach Fenstergröße einzelne Inhalte unsichtbar werden können. Deshalb zentriere die Seite besser so: http://www.ohne-css.gehts-gar.net/0001.php
Damit sollte auch das in deinem ersten Absatz beschriebene Problem behoben sein.

Wenn du den Div zentrieren willst, benötigst du dazu jedoch eine Breitenangabe, also in deinem Fall die 800px. Wird der Div breiter, dann sollte ein Scrollbalken erscheinen; ggf. overflow: auto; oder overflow: scroll setzen.

Bei den anderen Divs lass ebenfalls die relative Positionierung weg. Platziere sie besser ausschließlich per float und margin.

Die restliche Breite sind keine 600px sondern weniger. Nach dem CSS-Boxmodell musst du auch noch die border-, padding- und margin-Werte berücksichtigen.

Die Höhe des Parentdiv richtet sich nach der Höhe seines Inhalts. Allerdings solltest du vor dem Schließen des Parentdiv noch clearen, da seine Inhaltsboxen gefloatet sind.