title: How to display inline blocks without breaking them on new line when shrinking parent
body: <p>I have 2 columns (inline blocks) in a container (100% width). </p>
  
  <ol>
  <li><p>Left side column has to have a min-width, say 200px, width:25%.</p></li>
  <li><p>Right side column has width:75%</p>
  
  <pre><code>&lt;style&gt;
  .outer {
      width: 100%;
      border: 1px solid black;
  }
  .left, .right {
      display:inline-block;
  }
  .left {
      min-width: 200px;
      width: 25%;
      background-color: #dcc2c2;
  }
  .right {
      width: 75%;
      background-color: #d0dee8;
  }
  &lt;/style&gt;
  
      &lt;div class="outer"&gt;
          &lt;div class="left"&gt;left&lt;/div&gt;
          &lt;div class="right"&gt;right&lt;/div&gt;
      &lt;/div&gt;
  </code></pre></li>
  </ol>
  
  <p>Until the min-width is reached when resizing, the columns sit side by side which is what I want, but once the min-width kicks in, the right column falls on the next line.</p>
  
  <p>How can I make the right column to shrink but not fall on the next line ?</p>
  
  <p><a href="http://jsfiddle.net/4Bqvg/">Link to JSFiddle</a></p>