Lay out question

Code:

<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 when I put height:120px; in comment2 div?