Question

I have a div that is as high as the window and about 4 times as wide (it is stretched horizontally by elements inside it).

And then this other <div> inside it, which is supposed to be as wide width:100% as its parent (it’s for a background picture).

However, the child <div> is only as wide as the window and doesn’t quite fill up its parent. This happens in all browsers I’ve tried.

Why is that, and how can I fix it ?

Source :

<style>
.parent
{
width:100%;
height:100%;
overflow-x:scroll;
overflow-y:hidden;
position:absolute;
top:0;
left:0;
background-color:#999;
}

.child
{
width:100%;
height:200px;
position:absolute;
bottom:0;
left:0;
background-color:#000;
color:#fff;
}

.stretcher
{
width:10000px;
height:32px;
position:absolute;
}
</style>

<div class="parent">
  <div class="child">this should stretch as much as its parent !</div>
  <div class="stretcher">this is some content that defines the page's width</div>
</div>

JSFiddle

Answer 1

The .stretcher div will not expand the parent as position: absolute takes the element out of the page flow so its width has no effect on the parent. Child is behaving properly and expanding to the width of the parent. You can see this clearly if you use Firebug or similar.

As for how to fix it, not sure exactly what you’re trying to accomplish with the stretcher div and why you don’t just give the parent the width. Perhaps you could expand a bit on what you’re trying to do with this structure.