Question

I want the right div to have a fixed width and the left div to take up everything else inside the box.

<div id='outer' style='width:100%'>
 <div id='inner1'></div>
 <div id='inner2'></div>
</div>

Answer 1

There may be a better way of doing this, but this may achieve what you’re trying to accomplish:

#outer {
  background-color: red;
}

.clear {
  clear:both;
}

#inner1 {
  background-color: red;
  margin-right:200px;
  float:left;
}

#inner2 {
  float: right;
  width: 200px;
  margin-left: -200px;
  background-color: blue;
}

Combined with

<div id='outer' style='width:100%'>
 <div id='inner1'>Foo</div>
 <div id='inner2'>Bar</div>
 <div class='clear'></div>
</div>

So, while this doesn’t actually make the one on the left take up the rest of the space, it won’t encroach upon the right column.

Associated jsFiddle:

• http://www.jsfiddle.net/r7MgY/1105/