title: How do I put a <p> beside an <img> within a <div>?
body: <p>I need to put a paragraph to the left of an image in an html page.  Right now, the text is beside the image, but the paragraph itself extends behind the image to the left side of the container.  I'd like them simply to be beside each other, inline, with the text in the paragraph wrapping like normal text does.</p>
  
  <pre><code>&lt;div class="content-box"&gt;
              &lt;h1&gt;Welcome to Genesis of Robotics!&lt;/h1&gt;
              &lt;p&gt;Unrelated text &lt;/p&gt;
                  &lt;div id="holder"&gt;
                      &lt;img id="problem-image" src="css/images/problem_image.jpg" width="500px" height="300px"&gt;
                      &lt;p class="p"&gt;The Problem Text&lt;/p&gt;
                  &lt;/div&gt;
              &lt;img src="css/images/define.png" width="200px" height="200px"&gt;
              &lt;img src="css/images/brainstorm.png" width="200px" height="200px"&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#drawing-image {border-radius: 15px; }
      .content-box h1{color:#fff; text-align: center; margin: auto; width: 630px;    background: url(css/images/paper.png); padding: 12px; border-radius: 15px;}
      .content-box p{padding-top: 40px; padding-bottom: 40px;}
      #holder {height: 0px; width: auto; height: auto; }
      #holder p { height: auto; width: 100px; }
      #holder img { margin: 15px; }
  </code></pre>