CSS: Make a div fill remaining space on right-hand side, without inner content overflowing

Question

I have a fixed-width left div, and I want to make the right div fill the remaining space.

So far I've been taking this approach recommended by another SO poster, but it doesn't work if I have content inside the right div.

The content in the right div is set to width: 100%, so I would expect it to be no wider than the right-hand div, but it overflows the right div.

<div>
  <div id="left">left</div>
  <div id="right">right<div id="insideright">overflows</div</div>
</div>

<style>
#left {
    float:left;
    width:180px;
    background-color:#ff0000;
}
#right {
    width: 100%;
    background-color:#00FF00;
}
#insideright { 
    width: 100%; 
    background-color: blue; 
    height: 5px;
}
</style>

JSFiddle here, demoing the problem: http://jsfiddle.net/MHeqG/155/

What can I do?

I want to support older IE browsers, so I'd rather not use display: table-cell etc if I can avoid it, or at least not without a reasonable fallback.

Can you clarify your question by referencing the actual id of the div(s) you're talking about? "The content in the right div..." which right div? — brandonscript, Jan 15 '14 at 23:48
its overflowing because you set its width property to 100% of the screen right next to a floated element. It continues all the way because the there is no element to stop it. you should use a clear fix after floats — agconti, Jan 15 '14 at 23:53
do you want to avoid the overflow all together OR just overflow to the far left? — Danield, Jan 15 '14 at 23:56

score 7 · Answer 1 · answered Jan 16 '14 at 00:08

7

Actually it's pretty simple... don't add 100% to the right div :)
just add the overflow property

LIVE DEMO

#left {
  float:left;
  width:180px;
  background-color:#ff0000;
}
#right {
  overflow:auto;
  background-color:#00FF00;
}
#insideright { 
  background-color: blue; 
}

...and if you even wondered how to make the red (left) div fill the remaining height... DEMO

answered Jan 16 '14 at 00:08

Roko C. Buljan

196,159
39
305
313

1

I was about to post exactly what you had for your second demo...nice – Jon P Jan 16 '14 at 00:16
@JonP thanks!, yeah, I made it immediately so I don't need to do it later. If not by the OP might have been asked by others. – Roko C. Buljan Jan 16 '14 at 00:19

brandonscript · Answer 2 · 2016-05-20T17:28:22.433

-1

Not sure exactly what you're trying to do (your references to right are ambiguous). But if I'm understanding, you want the insideright to be nested within the right without overflowing?

Why not use a <span> instead? <div> out of the box is display: block; which will force a wrap like that. Alternatively, override this behavior by using display: inline; or display: inline-block;.

<div>
    <div id="left">
        left
    </div>
    <div id="right">
        right
        <span id="insideright">this should not overflow right</span>
    </div>
</div>

http://jsfiddle.net/brandonscript/MHeqG/157/

edited May 20 '16 at 17:28

answered Jan 15 '14 at 23:49

brandonscript

68,675
32
163
220

1

I agree, if you can use a `` do that. – gfrobenius Jan 15 '14 at 23:50
this is not true, just add a `
` and you're at the beginning of the question. – Roko C. Buljan Jan 15 '14 at 23:54
@RokoC.Buljan that will overflow `right` not `insideright` though? Really, it's tough to fix this in this context - I'd need to see a real-world example to improve the answer. Unless of course we're talking `overflow: hidden;` or `white-space: no-wrap;` but that's an entirely different question/answer. – brandonscript Jan 15 '14 at 23:58

CSS: Make a div fill remaining space on right-hand side, without inner content overflowing

2 Answers2