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