CSS: two divs - one fills the space, one is compressed to fit

Question

Is there a way to have two divs located next to each other so that:

• The width of the outer div is unknown
• The rightmost div breaks its width into its contents (shrinks to fit)
• The leftmost div fills the remaining space

I see Paul D. Waite almost interrupting it here: xHTML / CSS: How to make the 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 off.

Any ideas?

Answer 1

Just 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; } 

JsFiddle test

Answer 2

Here you go:

http://jsfiddle.net/BhAcn/1/

Paul Waite example relevant 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 it....

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