DIV wtih overflow:auto causes the div to become larger than its actual size

Im creating a website with paragraph content in it. What I have here is the which is my container div and the actual content that is 100% of the height of mainContent, but only 50% of the width. I want there to be 15px padding around the actual content inside of the ab开发者_如何学CoutLeft. My problem is that when I use overflow:auto to for the scrollbars I am extending my content 30px outside of the #mainContent div and I have no clue why its doing this. Any suggestions to change this would be great. Thanks, meepz

http://i.stack.imgur.com/JLICh.jpg

#outerDiv #mainContent{
 position:relative;
 height:560px;
 margin:0;
 padding:0;
 background-color:#fff;
 border-style: solid;
 border-width:1px;
}
#mainContent #aboutLeft{
 padding:15px;
 position:absolute;
 width:55%;
 height:560px;
 left:0;
 top:0;
 overflow:auto
}

You need to add a wrapper DIV that you set the width on, then put your div with overflow:auto inside it since block level elements will take up 100% the width of their containing element.

This will solve your issue.