title: Responsive web design using right floating elements
body: <p>I know a lot of responsive design uses percentage width and absolute positioning to adapt to screen widths of different media types. But what if we can take advantage of the float right css style that is not commonly used but highly cross browser compatible?</p>
  
  <p><strong>Demo:</strong>  <a href="http://jsfiddle.net/3A89Q/48/" rel="nofollow">http://jsfiddle.net/3A89Q/48/</a></p>
  
  <pre><code>.wrapper { width: 70%; margin: 0 auto; }
  div, span { display: block; float: left; position: relative; }
  .wrapper &gt; div { width: 60px; }
  .b1 { background-color: blue; height: 132px; }
  .b2 { background-color: red; height: 88px; }
  .b3 { background-color: green; height: 44px; }
  .test { background-color: black; max-width: 160px; min-width: 100px; float: right; border: 2px solid black; }
  .test div { width: 16px; height: 16px; background-color: yellow; margin: 2px; }
  
  
  &lt;section class="wrapper"&gt;
      &lt;div class="b1"&gt;&lt;/div&gt;
      &lt;div class="b2"&gt;&lt;/div&gt;
      &lt;div class="b3"&gt;&lt;/div&gt;
      &lt;span class="test"&gt;
          &lt;div&gt;&lt;/div&gt;
          &lt;div&gt;&lt;/div&gt;
          &lt;div&gt;&lt;/div&gt;
      &lt;/span&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p><strong>My idea</strong> is to shrink a right floating element to a minimum width without using percentages. This shrinking process should only occur on the condition of neighboring elements restricting the available space of the element when the window width is reduced in size. If the available space available to said element is not restricted, the element will increase its width to a max length. So virtually the element has a max and a min width governing a given range of flexibility in size. <em>(Note: This range of width can be easily demonstrated by shrinking the results window to a small size in the jsfiddle demo I have linked above.)</em></p>
  
  <p><strong>At this time</strong> if the right floating element merges into a left floating element, it will float down underneath the left floating element maintaining its max width.</p>
  
  <p><strong>My desired result</strong> is to have this right floating element shrink to its minimum size before floating down under its neighbor. Once the element reaches its min-size it will drop down under its neighbor and in turn increase its width to fill in the remaining space up to its max width, and begin to repeat the process of adapting to its available space while floating right.</p>
  
  <p><strong>My question</strong> is, can my desired results be accomplished by just using css / css3?  If not, is there a JavaScript / jQuery plugin that performs this functionality?
  I have linked a jsfiddle demo above to help you understand and utilize a solution to this idea. </p>
  
  <p>Thank you for your help.</p>