CSS Content Width/Floating Issue

I have an issue where I am trying to make a content box that in itself will vary in width. Inside this content box there will be 2 other boxes and one of them I will know the exact width and the other one I will not. The issue is that I want to be able to set the width o开发者_Python百科f the content I know and then have the other content take up the rest of the width (which I will not know). If you take a look at this page:

http://ryanzec.com/tests/test1/ : It is probably best you look at this with the latest version of any browser.

The 3rd, 5th, and last one are bad because the content in the box I don't know the width to (The one with the text) takes up more than one line which which pushing the other content (the one with the buttons) down. I want the button to always be next to the text at the top. How would I gain this effect cleanly?

Please note that my concerns for browser support is the latest version of each browser. IE 8 is not a high priority concern even though I would like it to look descent it in (I don't care the it doesn't have rounded corners or small stuff like that). I could care less about IE 7//6 (as it stands, this looks like cray in those browsers anyways).

---

You could move .controls ahead of .title in the source and then remove the float from .title. This will keep the controls and title on the same line but cause the title to wrap under controls. To stop the wrapping, you could give .title a right margin equal to the width of .controls.

---

You could use 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>