advert banner dragging main container down!

[novice00]

hello guys,

maybe a simple fix for the pros out there but i'm just starting out and hoping for a quick simple fix for my problem, my problem is, i've semi-designed a basic layout and then i tried to add two containing advert divs on either side on my layout which are nested within the wrapper div, but when doing so, it drags my main content div below the ends of my advert div!

here is my html source:

<div id="wrapper">
		<div id="advert1">
        </div><!--advert1-->
        <div id="advert2">
        </div><!--advert2-->
			<div id="container">
               <div id="headercontainer">
               			<div id="Hleft">
                        </div><!---hleft--> 
                        <div id="Hright">
                        </div><!---hright-->
               </div><!--headercontainer-->
               <div id="navigation">
               </div><!--navigation-->
               <div id="message">
               </div><!--message-->
			   <div id="quicklist">
			   </div><!--quicklist-->
			   <div id="col1">
						   <div id="box1">
						   </div><!--box1-->
						   <div id="box2">
						   </div><!--box2-->
						   <div id="box3">
						   </div><!--box3-->
			   </div><!--col1-->
               <div id="col2">
						   <div id="box4">
						   </div><!--box4-->
						   <div id="box5">
						   </div><!--box5-->
						   <div id="box6">
						   </div><!--box6-->
			   </div><!--col2-->
	
			 </div><!---container-->
</div><!---wrapper--->

and my CSS..

 * {
	padding: 0px;
	margin: 0px;
}
#wrapper {
	height: 1200px;
	width: 1200px;
	background-color: brown;
	margin: 0 auto;
	border: 0px;
}
#container {
	height: 1200px;
	width: 940px;
	background-color: lime;
	margin: 0 auto;
	border: 0px;
}
#headercontainer {
	height: 120px;
	width: 940px;
	border: none;
	background-color: #fff;
}
#Hleft {
	float: left;
	height: 120px;
	width: 440px;
	border: none;
	background-color: pink;

}
#Hright {
	float: right;
	height: 120px;
	width: 500px;
	border: none;
	background-color: grey;
}
#navigation {
	clear: both;
	width: 940px;
	height: 30px;
	border: none;
	background-color: black;
	margin: 0 auto;

}
#advert1 {
	height: 600px;
	width: 120px;
	border: thin solid black;
	float: left;
}
#advert2 {
	height: 600px;
	width: 120px;
	border: thin solid black;
	float: right;
}
#message {
	height: 185px;
	width: 400px;
	border: none;
	background-color: pink;
	margin-left: 25px;
	margin-top: 25px;
	float: left;
}
#quicklist {
	height: 185px;
	width: 200px;
	border: none;
	background-color: brown;
	float: left;
	margin-left: 150px;
	margin-top: 25px;

}
#col1 {
	height: auto;
	width: 750px;
	border: thin solid black;
	float: left;
	margin-top: 25px;
	margin-left: 25px;
}
#col2 {
	height: 170px;
	width: 750px;
	border: thin solid black;
	margin-top: 25px;
	margin-left: 25px;
	float: left;

}

#box1 {
	height: 160px;
	width: 175px;
	border: thin solid black;
	float: left;
	margin-left: 25px;

}
#box2 {
	height: 160px;
	width: 175px;
	border: thin solid black;
	float: left;
	margin-left: 25px;

}
#box3 {
	height: 160px;
	width: 175px;
	border: thin solid black;
	float: left;
	margin-left: 25px;

}

can someone help me out here? many thanks

[teedoff]

How wide is your wrapper?? 1200px right?

How wide is your container?

Then how wide are your Hright and Hleft divs?

Box Model explains why this wont work.