CSS div lado a lado con anchuras de porcentaje y píxel

Tengo dos div (uno al lado del otro) dentro de un div principal, quiero que el div correcto ocupe el 100% del espacio restante (es decir, 100% – 200px) y siempre debe estar al lado del div izquierdo (no debajo del div izquierdo):

Como solo tiene una columna de ancho fijo, flote por la izquierda y eso es todo. En cuanto a la segunda columna, no especifique float y ancho; esto asegura que sea 100% ancho. Pero debes agregar un margen izquierdo; de lo contrario, la segunda columna interferirá con la columna flotante, por ejemplo

  • el fondo del aqua aparecerá detrás del fondo azul (apague el fondo azul para ver a qué me refiero)
  • si la segunda columna se vuelve más alta que la primera, el contenido adicional comenzará a aparecer debajo de la primera columna.
 

hacer que el envoltorio padre float . También es probable que desee eliminar el width: 100% en el segundo div hijo. Y tiene su ancho establecido por la cantidad de contenido dentro. O podría tener un porcentaje para ambos divs secundarios. Ejemplo 30% y 70% .

Demo aquí

Agregue propiedades de posición a su div derecha. Div izquierdo 200px y div derecho ocupa el espacio restante.

 #right{ background-color:Aqua; height:100px; position:absolute; top:0; right:0; left:200px; } 

Ver ejemplo de trabajo en http://jsfiddle.net/EpA5F/1/

Ok, entonces en los navegadores más nuevos podremos usar display: box; y box-flex: 1, … propiedades. Actualmente estoy usando esto en un proyecto web donde solo se requiere Chrome, así que esta nueva cosa de CSS3 me solucionó muchos problemas.

tu div izquierdo debería tener flotación a la izquierda y su ancho de píxel usando la posición relativa. Su div derecha solo debería tener una posición relativa y quizás un desbordamiento oculto. Esto debería solucionar tu problema. No es necesario usar el uso del div que borra el flotador.

La respuesta aceptada es buena, pero tuve un problema donde la columna de la derecha subrayaba mi subnavegación ya que también flotaba.

Con los navegadores modernos ahora puede tener todos los elementos flotantes y obtener el mismo efecto con un CSS más fresco. Usando “ancho: calc (100% – 380px);” significa que puede flotar sus elementos, colocarlos correctamente y verse bien …

 .container { float: left; width: 100%; } .container__left { float: left; width: 380px; height: 100px; background: blue; } .container__right { float: right; width: calc(100% - 380px); height: 100px; background: green; } 

Demostración http://jsfiddle.net/auUB3/1/

Si quieres que el div correcto tenga un ancho constante:

  

Y CSS

  .wrapper{ margin-right: CONSTANTpx; } .wrapper div{ float:left; } .constant-width{ top: 0px; right:0px; position:absolute; width: CONSTANTpx } 

Funciona bien sin fronteras

JSFiddle