title: 2 divs aligned side by side, how to make right div fill width 100%?
body: <p>I'm wondering what the best way to go about doing this is...</p>
  
  <p>I have 3 <code>div</code>s:</p>
  
  <ul>
  <li><p>a <code>div#container</code> with <code>width=100%;</code> that holds 2 inner <code>div</code>s</p></li>
  <li><p>a <code>div#inner_left</code> with <code>width</code> changing dynamically, but no wider than 200px (will hold a product image)</p></li>
  <li><p>an <code>div#inner_right</code> where the width should fill the rest of the space in the container (will contain text to describe the product shown)</p>
  
  <pre><code>#container {
     width:100%
  }
  
  #inner_left {
      display:inline-block:
      max-width:200px;
  }
  
  #inner_right {
      display:inline-block;
      width:100%; 
  }
  </code></pre></li>
  </ul>
  
  <p>The problem is that the <code>div#inner_right</code> creates a line break and fills the entire width. How can I make them align next to each other, with the right <code>div</code> accounting for the width taken by the left <code>div</code> (which changes dynamically?). I've gotten this to work other ways, but I'm looking for a clean solution...</p>
  
  <p>Any help for a CSS noob is much appreciated!</p>