Container, Main, Sidebars

Here is the CSS I am using:

#container {
   width:100%;
   height:100%;
   background: url(http://www.thinkinkutah.com/wp-content/uploads/2013/07/FullBackgroundGrade.png)
   overflow: auto;
}
#main {
   width:40%;
   margin: auto;
}
#sidebar {
   width:30%;
   float: left;
}
#heading {
margin-left: 80px;
align: center;
text-align: center;
}
#sideright {
   width: 30%
   float: right;
}

For some reason, the main div is centered, which is great, but it’s pushed the left sidebar div down so that the pictures are below the fold… Any ideas why this would happen? The html is literally just a couple img tags in the sidebar and an iframe in the main with no additional styling…

<div id="container">
   <div id="main">
	<div id="heading">
	<h1>Header Here</h1>
	<h3>Subhead here</h3>
	</div>
	<div id="video">

		<iframe width="900" height="506" src="//www.youtube.com/embed/miHwx-uUj8A" frameborder="0" allowfullscreen></iframe>
	</div>
   </div>
   <div id="sidebar">
<style>
img.block{display: block;}
</style>

<img class="block" style="padding-left:20px;" height="438" width="413" src="Image Here">
<img class="block" style="padding-left:20px; padding-top: 20px;" height="207" width="413" src="Image Here">
   </div>
</div>