DIV Kind gleiche Größe wie Eltern DIV - bezogen auf geschwisterliche Bildgröße?!?

[IceEagle]

Hallo,

ich habe ein Div, das enthält ein IMG und ein weiteres DIV mit Textinformationen.
Das Eltern-DIV soll die gleiche Größe annehmen, wie das Bild, welches aber mit APPEND per jQuery eingebunden wird....

Das funktioniert auch soweit, am Border des DIV sehe ich, dass das passt...

Nun soll aber das DIV unter dem Bild die gleiche Größe haben, wie das Bild selbst...
Zur Zeit mache ich das mit einem Zeitverzögerten jQuery-Script, weil ich es nicht anders gelöst bekomme.
Das flackert aber leider beim Blättern durch die Bilder.

Hat einer eine reine CSS Lösung die nicht flackern würde?

So wird das Bild eingefügt, damit ist das auch die DOM-Struktur für dieses Bild:

$('.zoomPictureContainer').append('<div id="divZoomImage"><img class="zoomImg" src="./original/'+imageFiles[iPosInArray+2]+'" BORDER="0"/><div class="imgDescription">Bildbeschreibungstext </div></div>');



Etwas schöner formatiert die DOM-Struktur hier nochmal der übersichtshalber:

<div id="divZoomImage">
<img class="zoomImg" src="./original/'+imageFiles[iPosInArray+2]+'" BORDER="0"/>
<div class="imgDescription">Bildbeschreibungstext </div>
</div>




CSS sieht so aus:

#divZoomImage{margin: 0 auto;z-index:800;padding:0;display:inline;}
.zoomImg{margin: 0 auto;z-index:800;padding:0;border:10px solid #ffffff;max-height:800px;max-width:1020px}
.imgDescription{margin: 0 auto;background-color:#fff;padding:0 10px 10px 10px;overflow:hidden;width:100%}


Und das, was das Flackern auslöst:

setTimeout(function() {$('.imgDescription').width($('.zoomImg').width()) ;}, 50);

Ohne den Timer würde er die Bildgröße von dem Bild nicht finden, da APPEND...


Hat da einer eine Idee?

[codeRed]

Für das umschließende DIV die CSS-Eigenschaft "display" auf den Wert "inline-block" setzen? Das wäre zumindest mein erster Gedanke.

#divZoomImage{
  margin: 0 auto;
  z-index: 800;
  padding: 0;
  display: inline-block;
}

[IceEagle]

Für das umschließende DIV die CSS-Eigenschaft "display" auf den Wert "inline-block" setzen? Das wäre zumindest mein erster Gedanke.

#divZoomImage{
margin: 0 auto;
z-index: 800;
padding: 0;
display: inline-block;
}

VIELEN DANKE!!!
Du hast mir heute echt den Tag gerettet!

[protestix]

Schau dir auch mal das Element figure an, ich denke das passt hier besser.
https://wiki.selfhtml.org/wiki/HTML/...rierung/figure