title: Image floated left with fluid measure
body: <p>I have blocks of content like this</p>
  
  <pre><code>&lt;div&gt;
      &lt;img src="/path/to/image.jpg"&gt;
      &lt;h4&gt;Title&lt;/h4&gt;
      &lt;div&gt;
          &lt;p&gt;Paragraph&lt;/p&gt;
          &lt;p&gt;Paragraph&lt;/p&gt;
          &lt;p&gt;Paragraph&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/Simo990/fqHGn/1/" rel="nofollow noreferrer">Please check jsFiddle for a complete example with CSS</a>.</p>
  
  <p>No one of these elements should have a fixed width or height. As you can see in the jsFiddle, I have used <code>float:left</code> (130px) on the image and <code>margin-left</code> (140px) on the other elements, in order to align them correctly.</p>
  
  <p>My problem is that I have lots of images with a <strong>variable width</strong>. I just can't change the margin every time I have a new image. I want the other elements (<code>h4</code> and <code>div</code>) to be able to dinamically adapt to the remaining width:</p>
  
  <p><img src="https://i.stack.imgur.com/hGRBZ.png" alt="enter image description here">
  <img src="https://i.stack.imgur.com/Knae1.png" alt="enter image description here"></p>
  
  <p>How can I achieve this?</p>
  
  <p>Please help, I am really stuck.</p>