separar - salto de linea html5

¿Cómo puedo hacer que un div posicionado absoluto tenga un ancho igual al de su padre menos algún margen?

Question

Quiero tener un div interno que se ubique dentro de divs de contenedores de diferentes tamaños, y comience en una posición izquierda fija y luego tenga un ancho que llene el resto del contenedor. He incluido algunos ejemplos de css a continuación para tratar de transmitir el punto.

Tengo que usar la posición absoluta, así que no puedo simplemente flotar a la derecha y establecer un margen izquierdo. ¿Alguna idea de cómo hacer que esto funcione con posicionamiento absoluto? También probé el ancho: automático y algunas opciones de tamaño de caja diferentes.

Para aclarar, la dificultad de esto es que el borde izquierdo tiene que ser arreglado, y el borde izquierdo tiene que estar contra el borde derecho del contenedor. No puedo usar position: relative y javascript, pero probablemente terminaría haciendo divs .inner1 e .inner2 con anchos codificados antes de hacer eso. Pero con la esperanza de evitar eso.

.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

Esto funciona. Cambia el ancho de la caja exterior a lo que quieras y la caja interna crece para que coincida.

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

.inner {
    position: relative;
    margin-left: 200px;
    height: 100%;
}

Edición: aquí hay un violín

Answer 2

No entiendo qué necesita exactamente, pero ¿por qué no usa porcentajes?

En lugar de:

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

¿Por qué no usas algo como:

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

Configuración de los porcentajes para la izquierda y el atributo de ancho en consecuencia. 40-60, 30-70 y así sucesivamente.

Espero que esto ayude. Si no, por favor especifique un poco más.

Saludos

Answer 3

Simplemente especifique todas las propiedades top , left , bottom y right , y el cuadro se expandirá para ubicarse en todos esos puntos.

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

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

Ver el jsFiddle.