Сделать div заполнить остальную часть родительского

Question

У меня есть заголовок/контейнер без указанной ширины (поэтому он до тех пор, пока родительский). Внутри этого, у меня есть два меньших div. Теперь первый должен содержать только картинку (с установленным размером), а другой должен быть таким большим, как осталось место. Я не могу использовать ширину набора, потому что я не знаю ширины заголовка. Как это сделать с помощью чистого CSS?

Что я хочу, в конечном счете, это изображение, затем текст выравнивается справа вверху, а затем текст выравнивается с нижней частью изображения слева. Знаете ли вы, что это лучший способ сделать это?

Вот картина так легче понять:

Спасибо, Александр

EDIT 1:

HTML:

<div class="header"> 
    <div class="header_left"> 
    <div class="pic"><img width="35px" src="http://upload.wikimedia.org/wikipedia/commons/1/1a/Volkswagen_Logo.png" /></div> 
    </div> 
    <div class="header_right"> 
    <div class="time">18m ago</div> 
    <div class="name">Volkswagen</div> 
    </div> 
</div> 

CSS:

.header { 
} 

.header_left { 
    display: inline-block; 
} 
    .pic { 
    margin: 5px; 
    } 

.header_right { 
    display: inline-block; 
} 
    .time { 
    margin: 5px; 
    float: right; 
    } 
    .name { 
    margin: 5px; 
    float:left; 
    } 

Это своего рода»грязный прямо сейчас, потому что я просто пытался много вещей, и это последнее дело.

Answer 1

Было бы проще, если отображается ваш HTML. Вот пример, основанный на вашем описании. Вы можете увидеть это работает в скрипку здесь http://jsfiddle.net/Z68ds/18/

.header { 
    overflow:hidden; 
    padding: 4px; 
    background: #ddd; 
} 

.caption { 
    float: right; 
    font-size: 0.9em; 
} 

.avatar { 
    float: left; 
} 

.title { 
    margin: 14px 0 0 38px; 
} 

<div class="header"> 
    <div class="caption"> 
     texty text2 
    </div> 
    <img class="avatar" src="http://i.stack.imgur.com/5dv0i.jpg?s=32&g=1" /> 
    <div class="title">texty text1</div> 
</div> 

Answer 2

Вы должны использовать overflow в элементе, который вы не хотите устанавливать шириной без его плавания.

#left { 
    float: left; 
    width: 100px; 
} 

#right { 
    overflow: hidden; 
} 

Это заставит #right элемент, чтобы покрыть оставшуюся часть своего родителя. Никакой дополнительной разметки не требуется.

Answer 3

Является ли это то, что вы хотите для того чтобы достигнуть?

<div id="header"> 
    <img id="logo" src="http://blog.grio.com/wp-content/uploads/2012/09/stackoverflow.png" /> 
    <p id="textRight">texty text2</p> 
    <p id="textLeft">texty text1</p> 
    <div class="clearer"></div> 
</div> 

/* CSS */ 

#logo { 
    float: left; 
} 
#textRight { 
    float: right; 
} 
#textLeft { 
    clear: right; 
    float: left; 
} 
.clearer { 
    clear: both; 
} 

Вот скрипка:

http://jsfiddle.net/T26cD/