Consulta de divs anchos variables que ocupen 100% pagina

[Pablus00]

estimados tengo una consulta que no logro hacer, tengo 2 divs dentro de uno contenedor:

<div style="height:100px; width:100%; position:absolute;">
<div style="background-color:red; width:60%;height: 100px"></div>
<div style="background-color:blue; width:40%;height: 100px"></div>
</div>


lo que quiero es que al cambiar el ancho del div de la derecha, el de la izquierda de acomode...(no importa si uno tiene ancho px y otro %)...

es decir, si achico el div de la derecha, que el de la izquierda se agrande, y viceverza

muchas gracias por la ayuda!

Pd: el unico que voy a modificar es el de la derecha, el izquierdo no lo toco y quiero que se adapte en su ancho

[pzin]

Algo así podrías hacer:

Código HTML:

<div class="derecha"></div>
<div class="izquierda"></div>
 

Código CSS:

.izquierda {
  overflow: hidden;
}
 
.derecha {
  float: right;
  width: 20%;
}
 

[Pablus00]

hola pzin, gracias por responder, funciona bien pero me falta solo un detalle mas, que la altura de ambos divs sea del 100% de la pagina, se podra? Gracias

[pzin]

Entonces tendrás que indicar que todo ocupe esa altura, ya que los hijos dependen de la altura de los padres si usas porcentajes:

Código CSS:

html, body, body > div, .izquierda, .derecha {
  height: 100%;
}
 

Eso según el código que pusiste al principio.