CSS: il div padre non si espande in larghezza/altezza del bambino

Question

Sto cercando di sovrapporre una didascalia a un'immagine. Sono riuscito a farlo, ma l'immagine si sta espandendo dal genitore div.

Ho la contenente div insieme a inline-block, come io voglio che 'formato auto', non prendere width: 100%. Se guardi l'output corrente, vedrai che l'immagine potrebbe trovarsi all'interno della casella con bordi neri.

Deve funzionare solo in Chrome, se si verificano problemi con il browser.

Grazie in anticipo!

LIVE DEMO

---

CSS:

#body_content { 
    border: solid 1px blue; 
    display: inline-block;  
    padding: 5px; 
} 
#body_header { 
    border: solid 1px red; 
    font-size: 25px; 
    padding: 5px; 
} 
#body_image { 
    position: absolute; 
} 
#body_image_caption { 
    color: white; 
    line-height: 30px; 
    margin-left: 10px; 
} 
#body_image_container { 
    background: white; 
    border: solid 1px black; 
    margin-top: 3px; 
    padding: 10px; 
} 
#body_image_overlay { 
    background-color: black; 
    bottom: 5px; 
    display: block; 
    height: 30px; 
    opacity: 0.85; 
    position: absolute; 
    width: 100%;  
}​ 

HTML:

<div id="body_content"> 
    <div id="body_header"> 
     Heading 
    </div> 
    <div id="body_image_container"> 
     <div id="body_image"> 
      <img src="http://i.imgur.com/s6G8n.jpg" width="200" height="200" /> 
      <div id="body_image_overlay"> 
      <div id="body_image_caption"> 
       Some Text 
      </div> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

L'elemento #body_image sta fuoriuscendo dalla #body_image_container perché il suo position è impostato absolute. Gli elementi posizionati in modo assoluto vengono rimossi dal flusso del documento, causando il collasso degli elementi padre come se l'elemento figlio non fosse presente. Se si modifica a relative, allora diventa contenuta all'interno della scatola nera:

#body_image{ 
    position: relative; 
} 

http://jsfiddle.net/AaXTm/2/

Answer 2

Controllare questo violino. È necessario impostare la posizione dell'elemento figlio dell'immagine come assoluta e l'elemento padre come relativo. Modificare di conseguenza la larghezza della didascalia.

child-element { 
    position:absolute; 
} 

parent-element { 
    position:relative 
} 

http://jsfiddle.net/AaXTm/4/

Answer 3

Prova questo css in div genitore.

Overflow:auto