8

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?

Community
  • 1
  • 1
Anders Mogensen
  • 83
  • 1
  • 3

3 Answers3

9

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

kapa
  • 77,694
  • 21
  • 158
  • 175
  • that won't do it, you also need to change the order of the divs in the HTML otherwise the right floated div is under the other one. I just tried it in jsfiddle. – Bazzz May 05 '11 at 07:01
  • Thanks Bazz, but have you actually checked my jsFiddle? In both cases the floated div should come first, so what's wrong with only changing `left` to `right`? – kapa May 05 '11 at 07:03
  • Thanks. See my reply to Bazzz. – Anders Mogensen May 05 '11 at 08:08
  • @Anders I don't really think it matters that much. If you really want to stick to it, you could switch them with Javascript. – kapa May 05 '11 at 08:47
  • @bazmegakapa The rightmost div will contain a "Read more"-like button in several forms. It will seem odd codewise, but again, js may come to resque. – Anders Mogensen May 05 '11 at 08:54
  • @Anders I guess if you give correct `TITLE`s to your "Read more" buttons you will have no problems. – kapa May 05 '11 at 09:07
  • 1
    absolutely beautifull. this is exactly what i needed. thank you mister – Sutulustus Jul 13 '13 at 14:13
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 */
}
kapa
  • 77,694
  • 21
  • 158
  • 175
Bazzz
  • 26,427
  • 12
  • 52
  • 69
  • Hm, no offense, but you posted the same fiddle as mine :). I am always ready to be corrected, but seems like you just did the exact same thing. – kapa May 05 '11 at 07:06
  • Thanks. Still, the order of the divs seems a little bit odd. For semantics and screen reader usability, I would prefer that the leftmost placed div was the first in the code. – Anders Mogensen May 05 '11 at 08:05
  • @bazmegakapa we worked on it at exactly the same time. Have a look at our posting times, they are 1 minute off. Your post wasn't there yet when I started. – Bazzz May 05 '11 at 16:12
  • @Bazzz I just saw your comment under my answer first, and after that I saw your answer added. It just seemed to me that you wanted to correct me with your answer. Still, no offense, these things happen :). – kapa May 05 '11 at 17:15
  • @bazmegakapa none taken, I added my answer and noticed that yours (Simply change float:left to float:right) was missing the aspect that I mentioned (divs the other way around), so I added the comment. After that, I think you reviewed and updated your answer and the OP managed to get the right solution to his issue. I never meant to offend anyone. – Bazzz May 06 '11 at 13:27
  • @Bazzz Fair enough, me neither. – kapa May 06 '11 at 13:31
-2

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

Anish
  • 2,889
  • 1
  • 20
  • 45