Genişliğinde dış, iç 2 iç içe divs var:100%. Her ikisi de iç içe divs bir çizgi olmalıdır ve ilk içeriğinden boyutunu almak gerekir:

<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>

Soru #inner2 div #inner1 div genişliği belirtilen ve içinde ne olduğuna bağlı eğer yatay alanı dinlenmeye yapmak nasıl?

P. S. Tüm stilleri benim durumumda ayrı sınıflarda, burada CSS sadece sadeleştirme stil nitelikleri içine putted.

Neden IE 7 ve FF 3.6 çalışmak istiyorum

Benim için daha fazla ayrıntı bu gibi görünüyor:

 <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>

İşte istediğim resim:

overflow: hidden; gizemli arkadaşın burada. Element kaydır arkasında uzanan yüzer bitişik aradığın düzenini bence durur.

Burada biraz düzenlenmiş bazı HTML var: ids: # karakter olabilir sanmıyorum

<div id="outer">
    <div id="inner1">
        inner div 1. Some text...
    </div>
    <div id="inner2">
        inner div 2...
    </div>
</div>

Ve burada istediğiniz düzeni elde etmek için CSS.

(HTML ile IE 6 için ek CSS koydum conditional comments. Ben aslında IE 6'da fantezi IE 6 kullanıcıları için güzel olmak çok, ama orada çalışmak...) ihtiyacın olmadığını fark ettim

<style type="text/css">
#outer {
    overflow: hidden;/* Makes #outer contain its floated children */
    width: 100%;

    /* Colours and borders for illustration purposes */
    border: solid 3px #666;
    background: #ddd;
}

#inner1 {
    float: left;/* Make this div as wide as its contents */

    /* Colours and borders for illustration purposes */
    border: solid 3px #c00;
    background: #fdd;
}

#inner2 {
    overflow: hidden;/* Make this div take up the rest of the horizontal space, and no more */

    /* Colours and borders for illustration purposes */
    border: solid 3px #00c;
    background: #ddf;
}
</style>

<!--[if lte IE 6]>
<style type="text/css">
#inner2 {
    zoom: 1;/* Make this div take up the rest of the horizontal space, and no more, in IE 6 */
}

#inner1 {
    margin-right: -3px;/* Fix the 3-pixel gap that the previous rule introduces. (Shit like this is why web developers hate IE 6.) */
}
</style>
<![endif]-->

Test edilmiş ve çalışan 6, 7 ve 8; 3.5; 4 ve Chrome Firefox IE.