Dynamische Größe von Container-DIVs, generelle Frage

[Blurry]

Hi,

habe mal eine ziemliche Newbie-Frage: Wenn ich zwei DIVs miteinander verschachtele, also so:

#container

{

  position:relative;

  top: 0;

  width: 825px;

  background-color:#dcdcdc;

  border: 1px solid black;

}


[...]


<div id="container">

  <div style="position:absolute; left:15px; top:0px;">Lorem ipsum ...</div>

</div>

... dann hatte ich eigentlich gedacht, dass die Größe des inneren DIVs, welche durch ihren Text bestimmt wird, dynamisch dafür sorgt, dass das übergeordnete Eltern-DIV ebenso entsprechend größer wird. Passiert aber nicht, die Box des Eltern-DIVs bleibt in der Höhe bei 0 Pixeln, und das innere DIV steht einfach irgendwo im freien Raum darunter. Ich hoffe, mir kann jemand folgen.

Konkrete Frage: Wie stelle ich es an, dass die Größe des Container-DIVs mit der Größe des darin enthaltenen DIVs steigt? Oder was kann man eventuell tun, um ein ähnliches Verhalten zu erreichen?

[neuling]

dir is schon klar das du im inneren div die position:absolute; gesetzt hast. schreib mal deinen code um

<div style="position:absolute; top: 0; width: 825px; background-color:#dcdcdc; border: 1px solid black;">Container Div

<div style="position:relative; left:15px; top:0px;">Innerer Div </div>

</div>

dann funktioniert es.

hier kannst du es genauer mit dem positionieren nachlesen

SELFHTML: Stylesheets / CSS-Eigenschaften / Positionierung und Anzeige von Elementen

SELFHTML: Stylesheets / CSS-Formate definieren / Zentrale Formate definieren

und hier kannst du das mit der vererbung nachlesen, was wohlgemerkt auch erst ab css2 funktioniert

geht denke ich schneller als wenn ich das hier tippe

gruß

[Blurry]

Danke für die Antwort. Inzwischen hab ich dann auch mal den grundlegenden Unterschied zwischen position:relative und position:absolute gerafft. Setze ich das DIV relative, dehnt sich das Eltern-DIV wie gewünscht entsprechend aus. Problem war daraufhin bloß, dass ich drei Spalten habe und nicht alle drei relative setzen kann. Aber das hab ich inzwischen in den Griff bekommen: Die mittlere "Content-Spalte", die glücklicherweise immer die längste ist, ist relative, die anderen beiden absolute.

Funktioniert gut.

[geloescht_JesterDay]

Inzwischen hab ich dann auch mal den grundlegenden Unterschied zwischen position:relative und position:absolute gerafft.

Der grundlegende Unterschied ist: die beiden haben im Textfluss nichts miteinander zu tun.

Der Textfluss ist das, wie der Text von oben nach unten im Dokument angezeigt wird. Also Einrückungen, was kommt wann und wo, was verschiebt sich entsprechend etc.

Bei position:absolute wird das Objekt aus dem normalen Textfluss herausgenommen und liegt praktisch darüber.

Beispielsweise hast du einen großen Karton. In dem Karton hast du in der Mitte einen zweiten, kleineren Karton. Wenn du jetzt noch viele kleine Kugeln in den großen Karton gibst, dann ordnen die sich um den inneren, kleinen Karton an.

Das ist praktisch der normale Textfluss, wobei die Kugeln Text sind, und der kleine Karton irgendein Objekt.

Mit position:absolute verschiebst du nicht einfach den kleinen Karton im großen Karton, sondern du hebst den kleinen Karton an und legst ihn dann auf den Karton drauf (in der Draufsicht). Dann verschiebst du ihn beliebig.

Dass der kleine Karton jetzt keinerlei Einfluss auf die Kugeln im großen mehr hat sollte ja jedem klar sein

Genauso verhält es sich auch mit floats. Es gibt also praktisch 3 Textfluss-Ebenen: normal, position:absolute und float.

Die sind alle unabhängig voneinander.