100% Width Div Gets Cut Off When I Scroll Right If My Browser Window Is Smaller Than Div's Content

100% width division cut-off

The same happens with this web page, here on Stack Overflow. If you zoom in using FF5.0, the footer and headers are "cut" when you scroll right. This is because the content div has to overflow on the right.

I think you want to avoid having overflows on the side (it's not aesthetically pleasing, and it's harder to navigate through the page).

A solution could be to not have divs that have a minimal width (eg 960px for the div#content of this web page), but rather are variable (50%). If you zoom in, width=50% will stay 50%, it will not overflow.

PS: but it might be better to have some JavaScript code to do the zoom for you, so that you can more or less control what the end-user sees when they click on the zoom button that you'd provide, on the page.

Browser Scroll cuts off content

You have 3 nested divs. one is not styled. the next one in has the background color. and he deepest one has the 800px width.

try this and you'll see whats happening:

<html xmlns="http://www.w3.org/1999/xhtml"><head>

<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Browser Cutoff Example</title>
</head><body>

<div>
    <div style="background-color: rgb(0, 153, 0); border: 9px solid blue;">
    <div style="width: 800px; border: 1px solid red;">
        <strong>Width: 800px </strong>
        <br>
        Resize your browser Smaller than the width of this box until Horizontal scroll bars appear
      <br>
      Now scroll to the right. 
      <br>
      Why is the box getting cut off?
    </div>
  </div>
</div>

</body></html>

div doesn't stretch 100% width of a page if window width narrower then the rest of the content

You see a white space because, somewhere on the page, most likely under the header element, there is an element which is bigger than 100% – that's why you see the horizontal scrollbar.

The header infact is 100%, which means it's shorter than the full width of the document - therefore the white space.

To debug, I usually open the inspector and start from the bottom to the top and delete the sibling of the header, one by one, till I get to the point where everything is no more white space. At that point you know the problem is with the last element you just deleted. Try to look for errors in that particular element.

Why are some of my div elements been cut off horizontally?

The div with width: 100% is going to be 100% of the containing element, which is body. By default, the width of body will match that of the viewport. So body is only as wide as your viewport, then the div with width: 100% will be that same width, and the inner div with width: 1300px is overflowing outside of both of those. That's why the red line cuts off at the width of the viewport. If you added overflow: hidden to either body or the div with width: 100% you wouldn't see the overflow from the 1300px wide div.

If you want a horizontal scroll, you can add overflow-x: scroll; to the div with width: 100%;

<body style="background-color:#1b1b1b">  <div style="width:100%;border-top: 1px solid #f00;padding-top: 1em; overflow-x: scroll;">    <div style="width:1300px;height:300px;background-color:#fff;margin:auto;">foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo </div>  </div></body>

Div Width 100% not working when resizing of browser

I figured it out! I set width: 100% to min-width: 100% and that fixes the issues.

Set width div preventing other divs to span 100% width

<div id = "container">
    <div id="header"></div>
    <div id="content"></div>
    <div id="footer"></div>
</div>

#container {min-width:620px;}

See example: http://jsfiddle.net/calder12/xN2PV/3/

Point to note. min-width is not supported in IE6. I doubt this matters, if it does you'll need a different solution.