title: CSS shrink container to size of two dynamic width divs
body: <p>This is what I'm trying to achieve</p>
  
  <pre>
                              CONTAINER
   --------------------------------------------------------------
  |                      CENTERED in CONTAINER                   |
  |    -----------------------------------------   ----------    |
  |   | Content Div                             | | Info Div |   |
  |   | shrink to contents  OR                  | | shrink to|   |
  |   | max size: (container width - info div ) | | contents |   |
  |   |                                         |  ----------    |
  |    -----------------------------------------                 |
  |                                                              |
  |    ------------------------------------------------------    |
  |   |  text div: width = width of content div + info div   |   |
  |    ------------------------------------------------------    |
   --------------------------------------------------------------
  </pre>
  
  <p>PICTURES (crude MSPAINT): <a href="http://i.stack.imgur.com/yCFL5.png" rel="nofollow">small content example</a> and <a href="http://i.stack.imgur.com/byhVI.png" rel="nofollow">large content example</a></p>
  
  <p>DIV INFO: Max 192 pixels, but should shrink if necessary.</p>
  
  <p>DIV CONTENT: Shrink to content. If content is large, width= remaining space in container.</p>
  
  <p>DIV TEXT: width = width of CONTENT + width of INFO.</p>
  
  <p>Here's what I have so far. I am not using floats because I want the content and info divs to be overall centered on the page.</p>
  
  <p>The problems I am having are:</p>
  
  <ul>
  <li>the text div expands to the container size. </li>
  <li>if the browser window is shrunk, the info div gets bumped to the next
  line.</li>
  </ul>
  
  <h2>CSS</h2>
  
  <pre><code>#container {
      width: 80%;
      min-width: 760px;
      padding-top: 0;
      margin: 0 auto; 
  }
  #content {
      max-width: 71%; /* Kinda solves the problem of bumping info div
                         to next line, but leave awkward gaps */
      width: auto;
      vertical-align: top;
      display: inline-block;
  }
  #info {
      width: auto;
      vertical-align: top;
      text-align: left;
      display: inline-block;
  }
  #text {
      margin: 10px auto;
      width: auto;
      display: block;
      text-align: left;
  }
  </code></pre>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;div id="container"&gt;
  &lt;div id="main"&gt;
      &lt;div id="content"&gt;&lt;img src="image.jpg" /&gt;Lorem ipsum ...&lt;/div&gt;
      &lt;div id="info"&gt;Lorem ipsum dolor&lt;/div&gt;
      &lt;div id="text"&gt;Lorem ipsum ...&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>