title: Why does a parent div resize to it's child elements?
body: <p>I have 3 div boxes which were perfectly aligned and centered, and then when I added text inside the divs, the parent div would stretch and resize to what was inside. I tried using resize: none on the child and parent elements, but that didn't do anything. Also tried using position:absolute; and relative. </p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="boxes-parent"&gt;
      &lt;div class="left-box"&gt;
          &lt;div class="blue-boxes"&gt;
              &lt;h1 class="blue-box-header-text"&gt;About&lt;/h1&gt;
              &lt;p class="blue-box-text"&gt;I used to be better at CSS and HTML. Sorry!&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="center-box"&gt;
          &lt;div class="blue-boxes"&gt;
              &lt;h1 class="blue-box-header-text"&gt;Info&lt;/h1&gt;
              &lt;p class="blue-box-text"&gt;Info info info.&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="right-box"&gt;
          &lt;div class="blue-boxes"&gt;
              &lt;h1 class="blue-box-header-text"&gt;Contact&lt;/h1&gt;
              &lt;p class="blue-box-text"&gt;Phone: (888) 888-8888&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.boxes-parent {
      margin: 0px auto;
      text-align: center;
  }
  
  .left-box, .center-box, .right-box {
      padding-top: 10px;
      padding-left: 2%;
      padding-right: 2%;
      display: inline-block;
      position: relative;
      min-width: 25%;
  }
  
  .blue-boxes {
      background-color: #3498db;
      height: 250px;
      position: absolute;
      resize: none;
  }
  
  .blue-box-header-text {
      padding-top: 20px;
      font-size: 26px;
      color: #fff;
  }
  
  .blue-box-text {
      resize: none;
      max-width: 500px;
      position: relative;
      display: inline;
  }
  </code></pre>
  
  <p>Result: <a href="https://jsfiddle.net/0wvyaqbo/" rel="nofollow">https://jsfiddle.net/0wvyaqbo/</a></p>
  
  <p>Also, my questions sometimes get downvoted. Have any advice on how I can better format this question? Trying to make it applicable for others. Thanks for all the help!</p>