I want a div with a fixed width image on the left and a variable width div with a background color, which should extend its width 100% on my device. I can't stop the second div from overflowing my fixed div.
When I add overflow:hidden at the variable width div it just jumps under the photo, on the next row.
How can I fix this the right way (i.e. without hacks or margin-left, since I need to make the site responsive later with media queries and I have to change the image with other resolution images for each device)?
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;
}
Try removing the float:left
and width:100%
from .header-right
— the right div
then behaves as requested.
.header {
float: left;
background: #efefef;
background-repeat: no-repeat;
width: 240px;
height: 100px;
}
.header-right {
overflow: hidden;
background-color: #000;
height: 100px;
}
<div class="header"></div>
<div class="header-right"></div>