CodingForums.com - Why the wrapper grow?

Code:

ode:

<style type="text/css">

body 

{

        margin: 0;

        padding: 0;

        background-color:#552F18;

}

#wrapper 

{

        width:960px;

        margin-right: auto;

        margin-left: auto;

        background-color:GREEN;

}



#header

{

  position:relative;

  width:940px;

  height:110px;

}



#header #logo{

        position:absolute;

        left:24px;

        top:24px;

        z-index:2;

}



#comment2

 {

   background-color:#CA1E1E;

   height:120px;

   width:615px;

   padding-left:15px;

   padding-top:20px;

   position:relative;

 }

#about_us

{

   background-color:#E2E7EB;

   height:220px;

   width:615px;

   position:relative;

   padding-left:15px;

   padding-top:15px;

   font-size:15px;

   padding-bottom:15px;

   margin-top:5px;

}

</style>

</head>

<body>

<div id="wrapper">  

   <div id="header">

        <H1> THIS IS THE HEADER </H1>

   </div>

 <div id="main_left">

   <img src="image/secondary_slider2.jpg" alt="6 Years!" >



        <div id="about_us">

                 this is just a test

                  this is just a test        

        </div>

   

       <div id="comment2"  >

          this is just a test

           this is just a test

       </div>

  </div>

</div>

</body>

This is just a test(short code). So I made my header div as relative position, so I can position the content in header with absolute positioning. Is this a correct approach?Now I add an image in the main_left div which is secondary_slider2.jpg, why the wrapper grow?Even thought I declared a fixed width in the wrapper? I want it to stay as width:960px;

Also why the wrapper expand and shows a scroll when I put height:120px; in comment2 div? Thanks

Here is the live run

http://anishgiri.net46.net/test.html

I realize that when the page got longer of course it will show a scroll, and the wrapper does not really grow, the scroll just occupy space on the left that is why it looks like the wrapper grows. How silly I am.