title: how to create two divs shapes to overlay each other
body: <p>How can I create two separate divs with css shapes to overlap each other? I need to be able to load content to the particular divs as well. </p>
  
  <p>The shape is a circle then behind is a rounded rectangle. I need to be able to place custom img to fit within the circle and to place small copy and images into the rectangle. </p>
  
  <p>Any suggestions? Right now, I just have all the content in one div.</p>
  
  <pre><code>&lt;div class="box"&gt;
  &lt;img src="images/profile_image.png" /&gt;&lt;br /&gt;
  First Last &lt;br /&gt;Chicago, IL
  &lt;br /&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Heres the CSS:</p>
  
  <pre><code> margin: 4px;
   border: 1px solid #58585B;
   text-align:left;
   font-size:12px;
   width:200px;
   border-radius:10px;
  </code></pre>