How come my red border is not wrapping around my text div and my side bar div

Question

How come my red border is not wrapping around my text div and my side bar div. Here's my code:

CSS:

body{

background-color: #d7d7d7;
color: #666666;
font-family: arial, sans-serif;
font-size: x-small;
}

div#header {
background-color: #323232;
height: 140px;
width: 950px;
}

div#maincontainer {
background-color: #d7d7d7;
width: 950px;
height: auto;
margin-top: 5px;
border: 1px solid red;

}

div#maintextcontainer{
//background-color: #333333;
width: 640px;
//margin-right: 10px;
margin: 1px;
float: left;
color: black;
}

div#maintextcontainer h2{
color: #4f4f4f;
}

div#sidebarcontainer {
//background-color: #333333;
width: 300px;
float: left;
color: black;
margin: 1px;

}

div#footer{
background-color: #323232;
width: 950px;
margin-top: 5px;
clear: left;
}
div#global{
width: 950px;
margin: auto;
}

HTML:

<div id="global">
<div id="header"> This is the header div</div>
<div id="maincontainer">
<div id="maintextcontainer">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam neque eu turpis euismod eget suscipit nulla ultrices. Donec sagittis mi non sem vestibulum elementum dapibus risus auctor. Praesent tristique laoreet dapibus. Integer vel ligula lorem, et pharetra lorem. 
</div>
<div id="sidebarcontainer">Nam at lectus vitae est tempor lacinia sed et ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent interdum mi id nisi aliquet pulvinar. 
</div>
</div>
<div id="footer">This is Footer Text</div>
</div>

Answer 1

You need to add overflow:auto; to div#maincontainer. Floated elements will flow outside of their containing element, unless this attribute is set.

Also, a double slash (//) is not a valid commenting symbol in CSS.