title: Have DIV Automatically Resize With Content - CSS
body: <p>Direct Link to Issue: <a href="http://s18.postimg.org/f55rkfl1l/issue.png" rel="nofollow">http://s18.postimg.org/f55rkfl1l/issue.png</a></p>
  
  <pre><code>&lt;div class="overall_content"&gt;
          &lt;div class="content"&gt;
              &lt;p&gt;jessicaPhotography&lt;br&gt;&lt;img src="images/heart.png"&gt;&lt;/p&gt;
              &lt;div class="content_picture"&gt;   
                      &lt;p class="main"&gt;
                      This is where the revolving images will appea
                      This is where the revolving images will appea
                      This is where the revolving images will appea
                      This is where the revolving images will appea
                      This is where the revolving images will appea
                      &lt;/p&gt; 
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Can someone help me understand why I cannot get my content div to expand with the text within the paragraph tag.  Here is my css:</p>
  
  <pre><code>html, body, header, p, h1, h2, h3, h4, h5, h6, img, .content {
  padding: 0px;
  margin: 0px;
  }
  
  html {
  background: url('images/background_gradient.png') repeat;
  }
  
  header {
  width: 100%;
  height: 30px;
  background: rgb(0,0,0);
  }
  
  .overall_content {
  width: 84%;
  height: 100%;
  background: rgb(255,255,255);
  margin: 0px auto;
  margin-top: .5%;
  position: relative;
  }
  
  .content {
  width: 98%;
  height: 98%;
  background: rgb(0,0,0);
  position: absolute;
  top: 1%;
  left: 1%;
  }
  </code></pre>
  
  <p><strong>ADDITIONAL INFORMATION</strong></p>
  
  <pre><code>.content_picture {
  height: 100%;
  width: 100%;
  }
  
  /********************************/
  /* Intrinsic Content Properties */
  /********************************/
  
  .content p.main {
  color: rgb(255,255,255);
  font-family: Verdana, Arial;
  font-size: 18px;
  padding: 25px;
  
  }
  </code></pre>