CSS Content Width / Floating Issue

Question

У меня проблема с тем, что я пытаюсь создать поле содержимого, которое само по себе будет различаться по ширине.Внутри этого блока контента будет 2 других блока, один из которых я буду знать точную ширину, а другой я не буду знать.Проблема в том, что я хочу иметь возможность установить ширину содержимого, которое я знаю, а затем сделать так, чтобы другой контент занимал остальную часть ширины (которую я не буду знать).Если вы посмотрите на эту страницу:

http://ryanzec.com/tests/test1/: вероятно, лучше всего смотреть на нее с последней версией любого браузера.

3-й, 5-й ипоследние плохие, потому что содержимое в поле, ширина которого я не знаю (с текстом), занимает более одной строки, которая отталкивает другой контент (с кнопками) вниз.Я хочу, чтобы кнопка всегда была рядом с текстом вверху.Как бы я получил этот эффект чисто?

Обратите внимание, что моя забота о поддержке браузера - это последняя версия каждого браузера.IE 8 не является высокоприоритетной задачей, хотя мне бы хотелось, чтобы он выглядел так, как есть (мне все равно, у него нет закругленных углов или подобных мелочей).Мне было наплевать на IE 7 // 6 (в любом случае, в этих браузерах это выглядит как cray).

Answer 1

Вы можете переместить .controls впереди .title в источнике, а затем удалить float из .title.Это будет держать элементы управления и заголовок в одной строке, но заставит заголовок переноситься под элементы управления.Чтобы остановить перенос, вы можете дать .title правое поле, равное ширине .controls.

Answer 2

Вы можете использовать jquery:

<div id="content-box">
<div class="known" style="width:300px;"></div>
<div class="unknown"></div>
<div>
<script type="text/javascript">
var box = $('.unkown').width();
$('#content-box').css('width',(box+300)+'px');
</script>