Динамическая ширина для поплавка влево div

Question

У меня есть два divs в моем приложении. Как я могу сделать свой левый 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), но это неправильно, потому что правая в текст является динамичным, и я хочу налево зеленый бар динамичным тоже.

http://jsfiddle.net/C5GL6/1/

Другой подход с параметрами таблицы, таблицы ячейки CSS ... но опять же ... не может сделать оставили зеленый бар подходят все пространство.

http://jsfiddle.net/sjfQj/

Как я могу добиться этого?

Answer 1

Удалить ширину размер в DIV

Отредактировано скрипку http://jsfiddle.net/C5GL6/2/

.logo { 
float: left; 
height: 55px; 
padding: 10px 20px; 
background: #004B35; 

} 

Answer 2

Удалить width и добавить 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; 
} 

DEMO Updated