Fixed width div on left, fill remaining width div on right
40,911
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>
Author by
Anamaria Miehs
Updated on September 19, 2020Comments
-
Anamaria Miehs over 3 years
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)?
- beginner web designer trying to tackle the horror of responsive websites -
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; }
-
Anamaria Miehs over 11 yearsThanks so much! It works on both the iPhone and Android Galaxy S plus! I think I just have to watch out and make the right media query min-device-pixel-ratio. Wish I could vote up, but I'm too new.
-
Paul Gear over 10 yearsIf you wanted to reverse the setup and have the right div fixed and the variable-width div on the left, would it be as simple as as changing the float:left on .header to be float:right? I've been playing with this at jsfiddle.net/veW2z/14 and I can't seem to make it behave the way I want it to.
-
caitriona over 10 years@PaulGear yep that should do it. keep the order of the divs the same though.
-
Paul Gear over 10 yearsAny ideas why jsfiddle.net/veW2z/19 isn't doing the right thing? I couldn't find a way to make it work apart from adding a margin-right to the left div that exceeds the width of the right div.
-
Matthew Layton over 10 yearsI tested this with height: 100% on .header and .header-right. When inspected with FireBug, the .header-right element appears to fill the entire area instead of the remaining area only. Is there any explanation for this behavior?