title: Responsive Div Content
body: <p><strong>Goal</strong>:  I'm trying to style content to be responsive to the dimensions of it's parent div. </p>
  
  <p><strong>Required Behavior</strong></p>
  
  <ul>
  <li>Depending on the div container the content would react to it and scale appropriately.</li>
  <li>I need content to always be centered. </li>
  <li>Move a container up when there's enough room to fit 2 containers horizontally (example JsFiddle: card-container2 shows the image and card info side by side but the button is still centered.)</li>
  </ul>
  
  <p><strong>Conditions I must meet</strong>:</p>
  
  <ul>
  <li>I am not allowed to use any media Queries.</li>
  <li>I am not allowed to use any JavaScript</li>
  <li>It must ALL be done in html and CSS.</li>
  </ul>
  
  <pre class="lang-css prettyprint-override"><code>.product-image-area {
  text-align: center;
  width: 100%;
  max-width: 180px;
  display: inline-block;
  }
  </code></pre>
  
  
  
  <p><a href="http://jsfiddle.net/fz840wh2/2/" rel="nofollow">JsFiddle</a></p>
  
  <p>EDIT:
  Due to the complexity of my question I shall illustrate this monster of a task I've been given:</p>
  
  <p>Image: <a href="http://i63.photobucket.com/albums/h123/Damian6969/Stack_EXample_zpsmskwkba0.png" rel="nofollow">http://i63.photobucket.com/albums/h123/Damian6969/Stack_EXample_zpsmskwkba0.png</a></p>
  
  <p>So my html code in the black rectangle (let's call this the "inner" container) will always be the same. </p>
  
  <p>This inner container will always have a width of 100% and height of 100%.</p>
  
  <p>The orange container (the "outer" container) will change in dimensions.</p>
  
  <p>I need my inner container be responsive. </p>
  
  <p>...I don't know if I can simplify this anymore guys. Another example is responsive code in general. But instead of a viewport, you have only an outer div.</p>