У меня есть 2 вложенных div внутри внешнего, который имеет ширину: 100%. Оба вложенных элемента div должны быть в одной строке, и сначала они должны получить размер из своего содержимого:

<div id="#outer" style="width:100%; border:1px">
  <div id="#inner1" style="border:1px; display:inline">
    inner div 1. Some text...
  </div>
  <div id="#inner2" style="width:100%????; border:1px; display:inline">
    inner div 2...
  </div>
</div>

Вопрос в том, как сделать # inner2 div, чтобы получить остаток от горизонтального пространства, если ширина # inner1 div не указана и зависит от того, что внутри?

Постскриптум В моем случае все стили находятся в отдельных классах, здесь я поместил CSS в атрибуты стилей просто для упрощения.

Я хочу, чтобы результат работал в IE7 + и FF 3.6

Более подробно для меня это выглядит так:

 <style type="text/css">
.captionText
{
 float:left;
} 

.captionLine
{
 height: 1px;
 background-color:black;
 margin: 0px;
 margin-left: 5px;
 margin-top: 5px;
 border: 0px;
 padding: 0px;
 padding-top: 1px;
}
 </style>
<table style="width:300px;">
<caption width="100%">
     <div class="captionText">Some text</div>
     <div class="captionLine"> </div>
</caption>
     <tr>
           <td>something</td>
     </tr>
</table>

Вот изображение того, что я хочу: