title: 3 Responsive DIV Boxes Side by Side - Not Staying Together
body: <p>Hi i need help figuring this out. I have 3 divs that need to stay side by side regardless of how big or small the screen is, but the problem is that, once the screen's width reaches below 400px, then the last div goes under the others. How can I make them stay inline and at the same time responsive and centered without getting crazy with media queries? Please help. <strong><a href="http://jsfiddle.net/32hcm/" rel="nofollow noreferrer">HERE'S A FIDDLE</a></strong></p>
  
  <p>CSS:</p>
  
  <pre><code>.box{
      background-color: coral;
      width: 30%;    
      float:left;
      margin:10px;
      border-radius:5px;
  }
  .text{
      padding: 10px;
      color:white;
      font-weight:bold;
      text-align:center;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="box"&gt;
      &lt;div class="text"&gt;Text&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="box"&gt;
      &lt;div class="text"&gt;Text&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="box"&gt;
      &lt;div class="text"&gt;Text&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>