title: Absolute positioned div being cut off by parent.
body: <p>I have a setup like the following:</p>
  
  <p><a href="http://jsbin.com/hevidoya/2/" rel="noreferrer">http://jsbin.com/hevidoya/2/</a></p>
  
  <p>As you can see, the lots of stuff text is wrapping, as it seems to be pressing up against the edge of its parent.  I want the inner div to be able to breathe and have the content inside fill its container.  I'm not sure how to resolve this, but I always thought that an absolutely positioned element broke the box model and wouldn't behave like this.  Since the parent is relative, it would start its position relative to the parent, but the width would be able to extend off outside of its parents container.  The more I decrease the left value, the better the box behaviors, but it is off center from where I want it to be.  I also looked at bootstraps CSS code for doing dropdowns, and I think I'm doing pretty much the same thing. </p>
  
  <p>Can anyone explain how to fix this, and perhaps explain why this is occurring?</p>