[SOLUCIONADO] 2 divs flotantes de tamaño dependiente de uno de ellos

[stramin]

Hola

No supe como explicarlo bien en el título en pocas palabras, pero el caso es que necesito poner 2 divs, uno al lado del otro de modo que el div derecho tenga un tamaño fijo de unos 200px y que el izquierdo ocupe el espacio restante.

por ejemplo, en una pantalla pequeña ambos divs serían algo así:
[____][__]

en una pantalla mediana serían así:
[________][__]

y en una grande así:
[__________________][__]

O sea que no importa el tamaño, el div derecho siempre mide 200px.

Había pensado en hacerlo en una tabla, pero el problema es que si la pantalla es muy pequeña ambos divs deberían apilarse así:
[__]
[__]

Espero que se entienda y gracias por su ayuda!

[pzin]

La forma más fácil que yo veo es haciendo algo así:

Código CSS:

div#izquierda {
  overflow: hidden;
}
 
div#derecha {
  float: right;
  width: 200px;
}
 

Nótese que #izquierda no está flotado.

Luego en el HTML las posiciones cambiadas:

Código HTML:

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

Con flexbox, a modo de curiosidad, que tiene una pésima implementación en los navegadores, algo así podría valer:

Código CSS:

#contenedor {
  display: flex;
}
#izquierda {
  flex: 1;
}
#derecha{
  width: 200px;
}
 

Código HTML:

<div id="contenedor">
  <div id="izquierda"></div>
  <div id="derecha"></div>
</div>
 

[stramin]

pzin... eres un GENIO!

funcionó perfecto, la verdad no entiendo exactamente que es lo que hace, no sabia que el overflow podía actuar de esa manera, literalmente me parece increíble!

Muchas gracias!

[pzin]

También hay otra cosa que puedes hacer, no lo pensé antes, ya por rizar el rizo.

Puedes usar calc() que tiene más o menos buena implementación y te deja seguir trabajando como haces normalmente.

Código CSS:

div#izquierda {
  float: left
  width: calc(100% - 200px);
}
 
div#derecha {
  float: left;
  width: 200px;
}
 

Al menos en Chrome, no sé si es Safari, hay que dejar un espacio entre los valores y el signo de la operación.

[stramin]

ah?

eso existe? siempre he deseado que exista algo como eso en CSS, si la W3C lo pone entonces debe estar estandarizado no?

eso me facilitará la vida de ahora en adelante, gracias otra vez!