How can div wrapper grow with img size?

Question

Hi,

How can div wrapper grow with img size?

<div style="width:900px;">
    <div style="width:100%;"> 
      <div>some text......</div>
      <img src="<?php echo $imageSrc; ?>"/> 
      <div>some text......</div>
    </div>
</div>

Thanks

Answer 1

Remove the width from the wrapper; that way it'll be stretched to whatever width its content requires. The 100% width now equals the width of the div's parent element.

Answer 2

Blocks take up the whole of their parent's width by default (minus margin, border and padding widths), so the 100% doesn't really do anything.

What you seem to be looking for is ‘shink-to-fit’ behaviour, where the parent's width is determined by the child. To get this you have to use something other than normal static positioning, one of:

• float: left, perhaps followed by a clear;
• position: absolute;
• display: inline-block (clean but historically less well-supported);
• tables.

in each case with no explicit width.