title: How to display three divs in line on a row
body: <p>Ok, I thought my CSS skills had finally gotten to the point where I wouldn't need to ask these kinds of questions, but...</p>
  
  <p>I've got three child divs within a parent div. I want them all to be displayed on the same line, each taking up 33% of the parents' width. As you can see in my fiddle, that's not what's happening. What am I doing wrong?</p>
  
  <p>Fiddle: <a href="http://jsfiddle.net/9nmCC/" rel="nofollow">http://jsfiddle.net/9nmCC/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="parent-div"&gt;
      &lt;div id="div1" class="child-div"&gt;
          &lt;p&gt;Div 1&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div id="div2" class="child-div"&gt;
          &lt;h4&gt;Div 2&lt;/h4&gt;
      &lt;/div&gt;
  
      &lt;div id="div3" class="child-div"&gt;
          &lt;h4&gt;Div 3&lt;/h4&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#parent-div {
      background: #555;
  }
  
  #div1 {
      float: left; /* Commenting this out results in another weird result*/
      width: 33%;
      padding: 10px;
      display: inline-block;
      background: blue;
      box-sizing: border-box;
  }
  
  #div2 {
      width:33%;
      padding:10px;
      display: inline-block;
      background: red;
      box-sizing: border-box;
  }
  
  #div3 {
      width: 33%;
      padding: 10px;
      box-sizing: border-box;
      background: green;
      display: inline-block;
  }
  
  .child-div {
       /*overflow: hidden;*/
  }
  </code></pre>