CSS: Two divs - one fills space, one shrink-to-fit - css

Question

Is there a way to have two divs placed next to each other so that:
The width of the outer div is unknown
The rightmost div atapts its width to its content (shrink-to-fit)
The leftmost div fills the remaining space
I see that Paul D. Waite has almost cut it here:
xHTML/CSS: How to make inner div get 100% width minus another div width
In my case, the two inner divs need to switch places, and I just can't cut it.
Any ideas?

Answer 1

Simply change float: left to float: right in Paul's example.
HTML:
<div id="outer">
<div id="adaptive">I will adapt my width to my content.</div>
<div id="filler">I will fill the remaining space.</div>
</div>
CSS:
#outer { overflow: hidden; width: 100%; }
#adaptive { float: right; }
#filler { overflow: hidden; }
Test jsFiddle

Answer 2

Here you go:
http://jsfiddle.net/BhAcn/1/
Paul Waite's example fitted to your question
#outer {
overflow: hidden;/* Makes #outer contain its floated children */
width: 100%;
}
#inner1 {
float: right;/* Make this div as wide as its contents */
}
#inner2 {
overflow: hidden;/* Make this div take up the rest of the horizontal space, and no more */
}

Answer 3

Try this....
Html:
<div id="outer">
<div id="inner-left">
<p>hello</p>
</div>
<div id="inner-right">
<p>hello1</p>
</div>
</div>
CSS
<style type="text/css">
#outer
{
width:100%;
height:100%;
border:1px solid black;
}
#inner-left
{
width:75%;
float:left;
border:5px solid black;
}
#inner-right
{
width:200px;
float:left;
border:5px solid black;
}
</style>
Hope this helps!!!