title: make inline-block elements responsive
body: <p>html</p>
  
  <pre><code>&lt;div class="article"&gt;
              &lt;a href="#"&gt;&lt;img src="http://cdn1.tnwcdn.com/wp-content/blogs.dir/1/files/2013/01/Cookies1-520x245.jpg"/&gt;&lt;/a&gt;
              &lt;div class="dateAuthor"&gt;
                  &lt;span class="date"&gt;Jan 4, 2014&lt;/span&gt;
                  &lt;span&gt;&amp;mdash; By &lt;/span&gt;
                  &lt;span class="author"&gt;Jonathan Lakin&lt;/span&gt;
              &lt;/div&gt;
              &lt;h1&gt;&lt;a href="#"&gt;Cookies Tell You A Lot About Your Audience, But Most of it is Wrong&lt;/a&gt;&lt;/h1&gt;
          &lt;/div&gt;&lt;div class="article"&gt;
              &lt;a href="#"&gt;&lt;img src="http://cdn2.tnwcdn.com/wp-content/blogs.dir/1/files/2014/01/20140103_151801-520x245.jpg"/&gt;&lt;/a&gt;
              &lt;div class="dateAuthor"&gt;
                  &lt;span class="date"&gt;Jan 4, 2014&lt;/span&gt;
                  &lt;span&gt;&amp;mdash; By &lt;/span&gt;
                  &lt;span class="author"&gt;Jonathan Lakin&lt;/span&gt;
              &lt;/div&gt;
              &lt;h1&gt;&lt;a href="#"&gt;Ten Website Trends To Expect&lt;/a&gt;&lt;/h1&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>.article{
      display: inline-block;
      vertical-align: top;
      margin: 0 1.6839378238341968911917098445596% 30px 1.6839378238341968911917098445596%;   /* 13px / 772px */
  }
  .article img{
      max-width: 360px;
      width: 100%;
      display: block;
  }
  .article h1{
      max-width: 350px;   
      width: 100%;        /* 350px / 800px */
      margin-top: 10px;
      font-size: 1.5em;
  }
  @media only screen
              and (max-width : 1000px) {
              #articlesWrapper{
                  margin-left: 1.0416666666666666666666666666667%;    /* 10px / 960px */
                  margin-right: 1.0416666666666666666666666666667%;   /* 10px / 960px */
              }
             }
  @media only screen
              and (max-width : 720px) {
              .article img{
                  max-width: 100%;
              }
              .article h1{
                  max-width: 97.222222222222222222222222222222%;  /* 350px / 360px */
              }
             }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/6wbfy/2/" rel="nofollow">jsFiddle</a></p>
  
  <p>The problem here is when the <code>width</code> drops below around <code>850px</code> the <code>inline-block</code> styles doesn't work and the elements drops below other elements, what I want to do is make those responsive. I mean, when the <code>width</code> drops below <code>850px</code> I want the elements to stay as <code>inline-blocks</code> and instead reduce there <code>size/width</code> as the width drops. Something like what is happening below <code>720px</code> but as <code>inline-blocks</code>. How can that be done?</p>