Html 浮动左div的动态宽度

我的申请表中有两个div。我如何使我的左div适合所有空间，直到右div。右div可以是任何宽度的文本或图像

<div id="header" class="header">
    <div class="logo">
        <img src="/Content/images/my_logo.png" alt="" />
    </div>
    <div class="logoClient">
        Test Client /*here can be text or image with ANY SIZE */
    </div>
    <div class="clear"></div>
</div>

测试客户端/*此处可以是任意大小的文本或图像*/

在本例中，我使用了固定宽度（700px和200px），但这是错误的，因为右边的文本是动态的，我希望左边的绿色条也是动态的

另一种使用表格、表格单元格css选项的方法。。。但是再一次。。。无法使左绿色条适合所有空间

---

如何实现这一点？

删除div中的宽度大小

编辑小提琴

---

删除

width

并向两个div添加

float:left

    .header 
{
    width: 950px;
    font-family:Helvetica, Arial, sans-serif;
    display:table
}

.logo {
    height: 55px;
    padding: 10px 20px;
    background: #004B35;
    display:table-cell;
}

 .logoClient 
 {
   display:table-cell;
    height: 55px;
    line-height: 55px;
    padding: 10px 0px;
    margin:0px -10px 0px 0px;
    font-size: 30px;
    color: #004B35;
    overflow:hidden;
    font-weight: bold;
    text-align: right;
    background: red;
}

---

你在找什么？最近有人因为没有好的理由否决了我的答案，从两个div中删除

width

s@Mr.Alien，否，在您的示例中，左div具有固定的宽度。。。我不希望左右div都有固定的宽度…：）@阿努普，你真的认为我没有试过这种方法吗？小文本不显示在右侧部分，左侧部分不适合所有剩余空间。请使用

display:table

和

table cell

。这是演示，这将是一个好方法。。。但无论如何，我需要正好相反的（红色部分必须有文本大小（“测试客户端”或任何文本大小），黑色部分必须适合剩余的空间）。。。

    .header 
{
    width: 950px;
    font-family:Helvetica, Arial, sans-serif;
    display:table
}

.logo {
    height: 55px;
    padding: 10px 20px;
    background: #004B35;
    display:table-cell;
}

 .logoClient 
 {
   display:table-cell;
    height: 55px;
    line-height: 55px;
    padding: 10px 0px;
    margin:0px -10px 0px 0px;
    font-size: 30px;
    color: #004B35;
    overflow:hidden;
    font-weight: bold;
    text-align: right;
    background: red;
}