Scroll Bar Using 100% Width Div

Here's my fiddle : http://jsfiddle.net/34TM4/1/ As you can see, the red div has a width of 100%. The blue div has a width of 800px. If you scroll to the right, to see the rest of t

Solution 1:

That's because 100% is defined as 100% of the width of whatever the element's parent is. In this case, because there's no parent element, the window (frame) is the parent. So 100% will be the width of the window, even if other elements would be wider than the width of the window.

If you wrapped both divs in another div and gave that new container div a width of 800px, the div of 100% would extend to 800 pixels.

Solution 2:

Percentage widths reference the element's containing block. The initial containing block is the viewport. You want the 100% element's containing block to be something other than the viewport. To accomplish this, nest the 100% element inside a non-percentage width element. For example, modify your fiddle with this:

<div id="blam">
<div id="container"></div>
<div id="test"></div>
</div>


#blam
{
    width: 900px;
}

Solution 3:

If you scroll to the right, to see the rest of the 800px div, you can see that the 100% div stops...

Setting a width as a percentage means it will adapt to that percentage of its parent element. In the case of div#container, it will adapt to the width of the viewport, which is what causes #container to stop when you scroll to the right.

To fix this issue, you can set a min-width to container equal to that of div#test.

#container {
    width: 100%;
    height: 30px;
    background: #d45;
    min-width: 800px
}

JS Fiddle: http://jsfiddle.net/34TM4/6/

Solution 4:

The quickest way to solve it is to add min-width: 800px property, like so: http://jsfiddle.net/34TM4/2/