title: How do I fit an image into a div box with description?
body: <p>I am trying to create a box that contains both an image and description under the image. Currently, my image overflows the box. I also want to be able to create a row of these boxes. How do I fix this? Thanks!</p>
  
  <p><a href="https://jsfiddle.net/br136ofp/" rel="nofollow noreferrer">https://jsfiddle.net/br136ofp/</a></p>
  
  <p>HTML below:</p>
  
  <pre><code>    &lt;div class="img"&gt;
        &lt;a href="#"&gt;&lt;img class="image" src="https://yt3.ggpht.com/-v0soe-ievYE/AAAAAAAAAAI/AAAAAAAAAAA/OixOH_h84Po/s900-c-k-no-mo-rj-c0xffffff/photo.jpg"&gt;&lt;/a&gt;
        &lt;br&gt;Blah blah blah blah blah
        &lt;p&gt;sdfsdfsdfsdfssdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf&lt;/p&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p>CSS below:</p>
  
  <pre><code> div.img {
       margin: 5px;
       float: left;
       width: 180px;
   }
  
   img.image {
     max-width:400px;
  
   }
  </code></pre>