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 .