Q:

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

I've found some (what I think) is rather strange behaviour.  Take this code:
<body style="background-color:#1b1b1b">
  <div style="width:100%;height:1px;background-color:#f00" /><br />
  <div style="width:1300px;height:300px;background-color:#fff;margin: 0 auto;" />
</body>

I haven't been doing web development for long, but I would've thought that that first div would always be the entire width of the page, no matter how much re-sizing I do to the browser window.  However, when I re-size the width of the browser window so it's less than the width of the lower div (1300px) and scroll across, the upper div that's supposed to be width:100% seems to be cut off.  I've recorded this behaviour:
http://i.imgur.com/5bFIj0O.gifv
(sorry about it not been embedded, seems the gifv file format is not supported here.) 
Any suggestions to this problem (it's probably a lot simpler that I think)? 

A:

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>

