CODEWITHSUNDEEP
csshtml
flossfan
flossfan

Reputation: 10884

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

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.

Upvotes: 2

Views: 3798

Answers (2)

brandonscript
brandonscript

Reputation: 72995

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/

Upvotes: -1

Roko C. Buljan
Roko C. Buljan

Reputation: 206465

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

Upvotes: 7

Related Questions