title: CSS dynamic width
body: <p>So I have a "post" system and I want the box to get larger as more posts come in. Here's what I see </p>
  
  <p><img src="https://i.stack.imgur.com/XB2qI.png" alt="enter image description here"></p>
  
  <p>This is what happens as I add another post </p>
  
  <p><img src="https://i.stack.imgur.com/FTQXO.png" alt="enter image description here"></p>
  
  <p>I just want it to keep adding height as more posts get posted. Here's what I'm currently using </p>
  
  <pre><code>&lt;div class="comment"&gt;
          &lt;div class="comment_cont"&gt;
          &lt;div class="icons"&gt;
          &lt;i class="fa fa-heart"&gt;&lt;/i&gt;
          &lt;i class="fa fa-comment"&gt;&lt;/i&gt;
          &lt;/div&gt;
          &lt;h1 class="message"&gt;@alex likes cats&lt;/h1&gt;
          &lt;p class="time"&gt;4 minutes ago&lt;/p&gt;       
          &lt;/div&gt;  
              &lt;div class="comment_cont"&gt;
          &lt;div class="icons"&gt;
          &lt;i class="fa fa-heart"&gt;&lt;/i&gt;
          &lt;i class="fa fa-comment"&gt;&lt;/i&gt;
          &lt;/div&gt;
          &lt;h1 class="message"&gt;@alex likes cats&lt;/h1&gt;
          &lt;p class="time"&gt;4 minutes ago&lt;/p&gt;       
          &lt;/div&gt;  
  
      &lt;/div&gt;
  </code></pre>
  
  <p>And my CSS </p>
  
  <pre><code>*{
      padding: 0;
      margin: 0 auto;
  }
  html{
      height: 100%;
  }
  body{
      background: #F6F5F6;
      height: 100%;
  }
  
  
  .follow{
          font-size: 23px;
          font-family: 'Avenir Next';
          font-weight: 500;   
          display: inline-block;  
          margin-right: -62%
  }
  .likes{
      padding-left: 20px;
  }
  
  .message{
      font-family: 'Avenir Next';
      font-weight: 400;
      padding-left: 35px;
      line-height: 70px;
  }
  
  .post{
      width: 100%;
      height: 100px;
      border-bottom: 1px solid #ccc;
  }
  .fa-heart{  
      transition: 0.5s;
      margin-top: 60px;
      color: #000;
      font-size: 24px;
      float: right;
      margin-right: 30px;
      cursor: pointer;
  }
  .fa-heart:hover{
      transition: 0.5s;   
      margin-top: 60px;
      color: #FF6699;
      font-size: 24px;
      float: right;
      margin-right: 30px;
      cursor: pointer;
  }
  .fa-comment{    
      transition: 0.5s;
      margin-top: 60px;
      color: #000;
      font-size: 24px;
      float: right;
      margin-right: 18px;
      cursor: pointer;
  }
  .fa-comment:hover{
      transition: 0.5s;   
      margin-top: 60px;
      color: #FF6699;
      font-size: 24px;
      float: right;
      margin-right: 18px;
      cursor: pointer;
  }
  .icons{
      float: right;
      margin-right: 0px;
  }
  .time{
      font-family: 'Avenir Next';
      padding-left: 40px;
      color: #929292;
      padding-bottom: 20px;
      border-bottom: 1px solid #ccc;
  }
  
  .comment{
      border-radius: 15px;
      margin-top: 150px;
      width: 750px;
      height: 200px;
      background: #fff;
      border: 1px solid #ccc;
  }   
  </code></pre>
  
  <p><a href="http://jsfiddle.net/h4Ahe/" rel="nofollow noreferrer">Here's</a> a demo </p>