title: How to automatically resize a box to fit content -- with jQuery Mobile
body: <p>I am building a web app with jQuery Mobile.</p>
  
  <p>Almost every page of the app has a single box, containing the pages' content; for the moment, these boxes have a fixed height.</p>
  
  <p>What I would like is for the boxes to rescale, such that each one is the right size for its specific content. Anyone have an idea how to do this?</p>
  
  <p>My CSS currently looks like this:</p>
  
  <pre><code>.ui-grid-g-login {
      overflow: hidden;
      background-color:#FFFFFF;
      margin-right: 10px;
      margin-left: 10px;
      height: 350px;
      padding-top:20px;
      padding-bottom:20px;
      padding-right:30px;
      padding-left:30px;
      border:2px solid;
      border-radius:20px;
  }
  </code></pre>
  
  <p>The class is assigned to a single div:</p>
  
  <pre><code>&lt;div class="ui-grid-g-login"&gt; content &lt;/div&gt;
  </code></pre>