verschachtelte divs -> äußeres andert Höhe nicht

[Anna]

Guten Abend,

ich habe folgendes Problem.
Ich habe zwei ineinander verschachtelte divs.
Bei beiden habe ich keine Höhe angegeben, bzw. habe ich es einmal mit height: auto; probiert.
Wenn das innere div durch ein eingefügtes bild größer wird, sollte doch das äußere Div seine Höhe auch anpassen, da ich ja bei beiden keine Höhe angegeben habe.
Genau das tut es nicht. Wenn das innere Div größer wird, wird dies über das äußere hinweg angezeigt.

Hier mal der gesamte Code der Divs:

HTML:
-----

<div class="nachricht">
 <div class="bild">
  <img src="test.gif" width="150" height="150" border="0" alt="">
 </div>
  Hier steht Text...
</div>

CSS:
----
/*Border-, Schrift- und Farbeinstellung hab ich herausgenommen*/

.nachricht{
 padding: 10px;
 margin-bottom: 20px;
 width: 100%;
}

.bild{
position: relative;
float:right;
margin-left:20px;
margin-right:5px;
margin-top: 10px;
margin-bottom: 10px;
background: #FF0;
}

Könnt ihr mir hier weiterhelfen?

Dankeschön
Anna

[Cheatah]

Hi,

Bei beiden habe ich keine Höhe angegeben, bzw. habe ich es einmal mit height: auto; probiert.

was das gleiche ist. Der Wert "auto" berechnet sich ohne enthaltene gefloatete Elemente, es sei denn, das äußere <div> ist ebenfalls gefloatet.

Cheatah

[Fritz]

Hallo Cheatah,

... es sei denn, das äußere <div> ist ebenfalls gefloatet.

hey, das ist "great"
Warum sag einem denn das keiner ;-)
Die Frage wurde hier und in x anderen Foren bestimmt schon tausend mal gestellt, und Du knallst die Lösung einfach so hin!

Gruß Fritz

[Erri]

Hi Cheatah,

was das gleiche ist. Der Wert "auto" berechnet sich ohne enthaltene gefloatete Elemente, es sei denn, das äußere <div> ist ebenfalls gefloatet.

Ich habe dies nun probiert. Wenn ich allerdings das äußere Element ebenfalls floate verschiebt es mir mein gesamtes Layout. (inneres = float: right; und äußeres = float: left;)
Kann es daran liegen, dass das hier äußere, bei mir eben noch nicht das äußere ist? Außerhalb des .nachricht sind bei mir noch weitere divs angeordnet?

Viele Grüße und Vielen Dank,
Erri

[Özi]

Hallo Anna,

Ich habe zwei ineinander verschachtelte divs.

.nachricht{
padding: 10px;
margin-bottom: 20px;
width: 100%;
}

.bild{
position: relative;

(»» ...)

}

"relative" ist nur relativ, wenn das Elternelement absolute oder relative positioniert ist. Am besten, Du fügst bei .nachricht ein "position:absolute;" ein oder nimmst bei .bild das "position:relative;" wieder raus. Entweder oder.
Hoffe das hilft Dir.

MSFG Özi

[Erri]

Hi Özi,

Am besten, Du fügst bei .nachricht ein "position:absolute;" ein ...

Bei .nachricht kann ich leider kein "position:absolute;" einfügen, da dieses Div nicht direkt vom TOP beginnt. Oberhalb des .nachricht sind noch weitere divs positioniert.  Somit würde es mir dieses div verschieben.

...oder nimmst bei .bild das "position:relative;" wieder raus. Entweder oder.

Habe ich probiert, aber das funktioniert leider auch nicht. :-(

Trotzdem vielen Dank für deine Mühe.

Viele Grüße und Vielen Dank,
Erri

[Cheatah]

Hi,

"relative" ist nur relativ, wenn das Elternelement absolute oder relative positioniert ist.

äh, wie bitte?

Cheatah

[Özi]

Hallo Cheatah und Erri!

Hi,

"relative" ist nur relativ, wenn das Elternelement absolute oder relative positioniert ist.

äh, wie bitte?

Cheatah

Stimmt!! Mein posting war völliger Humbug :-S
Folgendes ist wohl richtiger:
Mit dem Style-Attribut *position:relative* wird die Position relativ zum nächsten umgebenden Block-Element festgelegt.
Für 'gefloatete' Elemente gilt zudem folgendes:

...

(Vielleicht magst Du fortsetzen.)

Sorry!

Der sehr betretene und künftig nicht mehr so vorlaute
Özi

[Erri]

Hä, das verstehe ich nicht.

das sehe ich jetzt erst...
ich habe mich gestern mit meinem User "Erri" eingeloggt.
Das ging aber nicht. Nach einiger Zeit gings dann wieder.
Ich habe mich zwar zunächst gewundert, aber weils doch wieder ging *g*
Allerdings habe ich nicht gesehen, dass da Anna stand.

Kann sich das jemand erklären?

Viele Grüße,
Erri