title: In a responsive layout how can I get divs to shrink uniformly?
body: <p><a href="http://www.designobvio.us/GoldGrid2/" rel="nofollow">http://www.designobvio.us/GoldGrid2/</a> </p>
  
  <p>heres a sample page.  middle of the screen there will be the content box.  When one resizes the browser window you can see the content box scale horizontally from the "right only!".  </p>
  
  <ol>
  <li><p>How can I get my content boxes to scale from left and right uniformly?</p></li>
  <li><p>How can I make the boxes scale vertically when the browser window scales vertically?</p></li>
  </ol>
  
  <p>If you use Google chrome a blank new tab has the effect i'm looking for where <a href="http://vvcap.net/db/4cqAV8lk02EkhsSerduF.htp" rel="nofollow">http://vvcap.net/db/4cqAV8lk02EkhsSerduF.htp</a></p>
  
  <p>My codes super clean.
  HTML:</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div class="inner-box"&gt;
          &lt;!-- start of padder"--&gt;
          &lt;ul id='carousel_ul'&gt;
              &lt;li class="padder"&gt;
                 &lt;article class="web"&gt;
                  &lt;h2&gt;01.03.12&lt;/h2&gt;
                    &lt;section&gt;
                      &lt;h1&gt;Skollklubben.se&lt;/h1&gt;
                      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque facilisis elementum tellus, eget ullamcorper magna tristique ac. &lt;a href=""&gt;&lt;span&gt;details&lt;/span&gt;&lt;/a&gt; &lt;/p&gt;
                    &lt;/section&gt;
                &lt;/article&gt;
              &lt;/li&gt;
         &lt;/ul&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Please browse the css from source. (its just too much to post)
  Is there anything else I can offer to help get answers?  I'm willing to do the work/research I just don't know where to start.</p>