CSS establece el ancho para llenar el% del área restante

82

Perdón por el título un poco basura. No pude pensar en cómo describir este mejor.

Estoy tratando de implementar el gadget para miembros de Google Friend Connect en mi sitio (acabo de ingresar al esquema y quiero instalarlo 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 en 300px y colocando el gadget de Google dentro. Lo que me gustaría es poder hacer que un div llene el 95% del espacio restante a la izquierda del div del gadget de Google.

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

Espero que esto tenga sentido.

Gracias

css

— Jon
fuente

Stackoverflow.com/questions/4873832/…

— Adrien Be

70

Está. Busca un diseño semifluido. La búsqueda fue originalmente el santo grial de la implementación de CSS ... Pero como puede ver en ese enlace (están haciendo 3 columnas, 2 arregladas pero es fácil de modificar), es un problema resuelto hace mucho tiempo =)

— Oli
fuente

Luce perfecto. Gracias. Voy a jugar con esto durante el fin de semana.

— Jon

44

Son artículos como este los que reafirman mi temor de que CSS esté lejos, lejos de ser una buena herramienta para el diseño.

— s4y

11

@Sidnicious Como alguien que hace esto [convertir diseños en sitios web] como mi trabajo básico, puedo decirles que es mucho mejor que cualquier otra cosa que se haya sugerido antes o desde entonces. No es perfecto y necesitas saber cómo funciona ... Pero una vez que lo haces, es simple.

— Oli

pero si desea cambiar el ancho de una columna, debe editar los valores en todas partes. Existe una noción molesta de "si funciona, no lo toques a toda costa, y por favor no lo critiques", pero el diseño podría ser mucho más fácil. si solo mezcla% y px y hace referencia a otros valores, todo sería mucho más simple.

— Jonathan.

1

@Jonathan. No hay duda de que esto es cierto: las variables vivas y la artmética en CSS facilitarían mucho las cosas, pero no tenemos eso. Si desea romper la plasticidad, mire LESS / SASS / etc. Son la mitad de la solución.

— Oli

0

También hice un experimento rápido después de ver una serie de posibles soluciones por todas partes. Lo que estaba tratando de hacer era tener una mezcla de filas y columnas fluidas y fijas.

Esto es con lo que terminé:

http://jsbin.com/hapelawake

— Anthony Tambrin
fuente

0

Si prefiere evitar flotadores y clearfixes, use el diseño flexible.

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

<div class="main">
  <div class="col1" style="background: #518cf3;">Left column</div>
  <div class="col2" style="background: #94d0bb;">Right column</div>
</div>

Expandir fragmento

Nota: Agregue prefijos de proveedores flexibles si lo requieren sus navegadores compatibles .

— Reggie Pinkham
fuente

-1

Necesita crear un algoritmo usando jQuery o JS que verifique el espacio restante y establezca el ancho del elemento "resto" dinámicamente, según una compilación receptiva. 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 crear un sistema de medios basado en cuadrícula de respuesta líquida.

— BasisInteractive
fuente