Question

I have a varying width div. Inside are two others, one is fixed width, the other is supposed to fill the rest of the area. But I can’t get it to always fill. Depending on the width of the outer-box, it is either too small, or is too big and drops below inner-box-1. How do I get inner-box-2 to fill the rest of outer-box?

http://jsfiddle.net/Y57YP/

HTML

<div id ="outer-box">
   <div id="inner-box-1"></div>
   <div id="inner-box-2"></div>
</div>

CSS

#outer-box{
  width:50%;
  background:#fcc;
  position: relative;
  overflow: auto;
}
#inner-box-1{
  height:50px;
  width:50px;
  background:#ccc;
  float:left;
}
#inner-box-2{
  height:50px;
  width:80%;
  background:#555;
  float:left;
}

Answer 1

This is one of those odd answers that is easy but totally non-intuitive. You need to trigger block formatting context by using the overflow property in conjunction with the float property.

See this jsFiddle example.

#inner-box-2{
   height:50px;
   background:#555;
   overflow:auto;
}

All I did was remove the width and float from your #inner-box-2 div and add an overflow:auto