Question

I want to have an inner div that sites inside different sized container divs, and starts at a fixed left position and then has a width that fills up the rest of the container. I’ve included some example css below to try to get the point across.

I have to use absolute positioning so can’t just float right and set a left-margin. Any ideas of how to make this work with absolute positioning? I’ve also tried width: auto and some different box-sizing options.

To clarify, the trickiness of this is that the left border has to be fixed, and the left border has to be against the right border of the container. I can’t use position: relative, and javascript, but I’d probably end up making .inner1 and .inner2 divs with hard-coded widths before doing that. But hoping to avoid that.

.container1 {
  position: relative;
  width: 400px;
  height: 300px;
}

 .container2 {
  position: relative;
  width: 500px;
  height: 300px;
}

.inner {
  position: absolute;
  top: 0px;
  left: 200px;
  height: 100%;
  width: 100%;
}

Answer 1

Just specify all of the top, left, bottom, and right properties and the box will expand to be at all of those points.

.container {
  position: relative;
  width: 400px;
  height: 300px;
}

.inner {
  position: absolute;
  top: 0;
  left: 200px;
  bottom: 0;
  right: 0;
}

See the jsFiddle.