2-columna Div Diseño: Lograr una columna de ancho de ancho fijo y columna Fluid Izquierda

desafío:

creando un diseño de dos columnas donde la columna derecha tiene un ancho fijo mientras la columna izquierda se ajusta dinámicamente al espacio disponible.

proporcionado:

el código proporcionó intentos a Implemente el diseño usando Float and Margin, pero encuentra problemas.

Solución:

para establecer una columna de ancho de ancho fijo mientras mantiene la fluidez en la columna izquierda, esto Directrices:

1. Eliminar flotante en la columna izquierda: Eliminar la propiedad Float de la columna izquierda (#Content).
2. reordenar las columnas HTML: [ Coloque la columna derecha (#right) antes de la columna izquierda en el código HTML. Esto asegura que el ancho de la columna correcta se aplique primero.
3. Aplique el desbordamiento a la div: agregue el desbordamiento: oculto y una altura (por ejemplo, altura: auto) a la div (div. recipiente). Esto evita que los divs internos desborden el contenedor.
4. Establezca el ancho de la columna izquierda y desbordamiento: Establezca el ancho de la columna izquierda en auto y agregue desbordamiento: Hidden. Esto permite que la columna llene el espacio restante y evite la interacción con la columna derecha.

Código de ejemplo:

html:

  

    Right content with fixed width
  
  

    Left content with flexible width
  

css:

.container {
  height: auto;
  overflow: hidden;
}

.right {
  width: 180px;
  float: right;
  background: #aafed6;
}

.left {
  float: none;
  background: #e8f6fe;
  width: auto;
  overflow: hidden;
}

Demo:

Visite [this JSfiddle] (https://jsfiddle.net/jackjoe/fxwg7/) para una demostración de trabajo.