data - CSS establece el ancho para completar el% del área restante

tooltip div jquery

Question

Perdón por el título un poco basura. No podría pensar cómo describir mejor esta.

Estoy intentando implementar el gadget para miembros de Google Friend Connect en mi sitio (ingresé al plan y quiero ponerlo sin un rediseño importante, al menos para probarlo).

Mi problema es el siguiente:

Tengo un contenedor div que tiene un ancho del 90% de la página principal (cuerpo). Dentro de esto estoy flotando un div a la derecha y estableciendo su ancho a 300px y colocando el gadget de google dentro de él. Lo que me gustaría es poder tener un div llenar el 95% del espacio restante a la izquierda de la div gadget de google.

No sé si es posible mezclar px y% con divs y anchos.

Espero que esto tenga sentido.

Gracias

Answer 1

Hice un experimento rápido también después de ver una serie de posibles soluciones en todo el lugar. Lo que intentaba hacer era tener una mezcla de filas y columnas fijas y fluidas.

Esto es con lo que terminé:

http://jsbin.com/hapelawake

Answer 2

Es. Está buscando un diseño semi-fluido. La búsqueda fue originalmente el santo grial de la implementación de CSS ... Pero como se puede ver en ese enlace (están haciendo 3 columnas, 2 corregidas pero es fácil de modificar), es un problema largamente resuelto =)

Answer 3

Necesita crear un algoritmo usando jQuery o JS que verifique el espacio restante y establezca el ancho del elemento "resto" dinámicamente, por cada compilación responsiva. Si la compilación no responde, puede probar y establecer el ancho del elemento haciendo cálculos matemáticos simples.

Hemos experimentado problemas similares al construir un sistema de medios basado en una red sensible a los líquidos.

Answer 4

Solución Flexbox

.main {
  display: flex;
  width: 90%;
}
.col1 {
  flex-grow: 1;
}
.col2 {
  width: 300px;
  margin-left: 5%;
}

<div class="main">
  <div class="col1" style="background: #eee;">Left column</div>
  <div class="col2" style="background: #ccc;">Right column</div>
</div>

Nota: Agregue los prefijos del proveedor de flex si sus navegadores compatibles lo requieren.