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

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!!!