title: xHTML/CSS: How to make inner div get 100% width minus another div width
body: <p>I have 2 nested divs inside outer one, which has width:100%. Both nested divs should be in one line and first should get it size from it's contents:</p>
  
  <pre><code>&lt;div id="#outer" style="width:100%; border:1px"&gt;
    &lt;div id="#inner1" style="border:1px; display:inline"&gt;
      inner div 1. Some text...
    &lt;/div&gt;
    &lt;div id="#inner2" style="width:100%????; border:1px; display:inline"&gt;
      inner div 2...
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Question is how to make #inner2 div to get rest of the horizontal space if width of the #inner1 div is not specified and depends on what it is inside?</p>
  
  <p>P.S. All styles are in separate classes in my case, here I putted CSS into style attributes just for simplification.</p>
  
  <p>I want result to work in IE7+ and FF 3.6</p>
  
  <p>In more details for me it looks like this:</p>
  
  <pre><code> &lt;style type="text/css"&gt;
  .captionText
  {
   float:left;
  } 
  
  .captionLine
  {
   height: 1px;
   background-color:black;
   margin: 0px;
   margin-left: 5px;
   margin-top: 5px;
   border: 0px;
   padding: 0px;
   padding-top: 1px;
  }
   &lt;/style&gt;
  &lt;table style="width:300px;"&gt;
  &lt;caption width="100%"&gt;
       &lt;div class="captionText"&gt;Some text&lt;/div&gt;
       &lt;div class="captionLine"&gt; &lt;/div&gt;
  &lt;/caption&gt;
       &lt;tr&gt;
             &lt;td&gt;something&lt;/td&gt;
       &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Here is the image of what I want:
  <img src="https://i.stack.imgur.com/dHNhf.png" alt="Image of what I want"></p>