tag div attribute css css-float overflow fixed-width variable-width

css - div - Ancho fijo a la izquierda, rellene el ancho restante a la derecha



title attribute anchor tag (1)

Quiero un div con una imagen de ancho fijo a la izquierda y un div de ancho variable con un color de fondo, que debería extender su ancho 100% en mi dispositivo. No puedo evitar que el segundo div desborde mi div fijo.

Cuando agrego el desbordamiento: oculto en el div de ancho variable, simplemente salta debajo de la foto, en la siguiente fila.

¿Cómo puedo solucionar esto de la manera correcta (es decir, sin cortes o margen izquierdo, ya que necesito hacer que el sitio responda más tarde con consultas de medios y tengo que cambiar la imagen con otras imágenes de resolución para cada dispositivo)?

  • diseñador web principiante que intenta hacer frente al horror de los sitios web receptivos -

HTML:

<div class="header"></div> <div class="header-right"></div>

CSS:

.header{ float:left; background-image: url(''img/header.png''); background-repeat: no-repeat; width: 240px; height: 100px; } .header-right{ float:left; overflow:hidden; background-color:#000; width: 100%; height: 100px; }


Intente quitar el float:left y el width:100% desde .header-right : el div derecho se comporta como se solicita.

Ver este jsfiddle .