obrazki i div

<div id="main" style="background-color:blue;">
	  <div class="logoreklamy" style="background-color:yellow;">     
	      <div class="logo">
	      		<img src="<?php bloginfo('stylesheet_directory'); ?>/images/logo2.png" alt="Logo" class="logojpg"> </div>
	     		<div class="reklamy">
	     			<p id="sponsorzy"> Sponsorzy :</p>
	     			<img src="<?php bloginfo('stylesheet_directory'); ?>/images/obr1.jpg" alt="" class="reklama"> 
	     			<img src="<?php bloginfo('stylesheet_directory'); ?>/images/obr2.jpg" alt="" class="reklama">
	     			<img src="<?php bloginfo('stylesheet_directory'); ?>/images/obr3.jpg" alt="" class="reklama"> 
	     		</div>
        </div>
    
<div id="boxmain" style="">
			
<!-- Post -->
	<article >
		<footer>
			<ul class="stats" style="position:relative;left:5%;"></ul>
		</footer>
	</article>
</div>
						
<section id="footer" class="footer-glowna ">
	<ul class="icons">
		<li><a href="https://www.facebook.com/" class="fa-facebook"><span class="label">Facebook</span></a></li>
		<li><a href="localhost/BLOG/rss" class="fa-rss"><span class="label">RSS</span></a></li>
		<li><a href="mailto:" class="fa-envelope"><span class="label">Email</span></a></li>
	</ul>
	<p class="copyright"> &copy; Untitled.</p>
</section>
						
</div>

<style>
	/* dwa pierwsze */
  @media (min-width: 0px) and (max-width: 650px) {
   .logoreklamy {width:20%;text-align:center;margin-bottom:15px;margin:0 auto;}
   .right { width:45%;float: right;}#main {margin-top:30px;}
   .logojpg{position: relative; left:-30px; top:-40px; width:100px;height:112.50px;}
    #boxmain{padding-left:6%;}
    .reklama{ position: relative; left:-30px; top:140px;width:120px; height:60px;}
	#sponsorzy{font-size:130%;}
	.logo{ width: 150px ;padding: 10px;margin-bottom:10px;}
	  #boxmain{position: relative; left:200px; top:3px;}
}
	/*640x480 Tablet landscape*/
@media (min-width: 651px) and (max-width: 750px) {
    .logoreklamy {width:20%;float:left;text-align:center;margin-bottom:15px;margin:0 auto;}
    .logojpg{width:120px;height:135px;}
    #boxmain{padding-left:8%;width:80%;float:right;text-align:center;margin-bottom:30px;}
    .reklama{ width:110px; height:55px;}
    .logo{margin-bottom:10px;}
}
	     /*768x1024 Ipad portrait*/
@media (min-width: 751px) and (max-width: 850px) {
    .logoreklamy {background-color:aqua;width:20%;float:left;text-align:center;margin-bottom:15px;margin:0 auto;}
    .logojpg{width:150px;height:168.75px;}
    #boxmain{padding-left:6%;width:80%;float:right;text-align:center;margin-bottom:30px;}
    .reklama{ width:110px; height:66px;}
	.logo{margin-bottom:30px;}
}
	/*1024x768 Netbook*/
@media (min-width: 851px) and (max-width: 1199px) {
    .logoreklamy {background-color:red;width:20%;float:left;text-align:center;margin-bottom:15px;margin:0 auto;}
    .logojpg{width:180px;height:202.5px;}
    #boxmain{padding-left:6%;width:80%;float:right;text-align:center;margin-bottom:30px;}
    .reklama{ width:160px; height:80px;}
	.logo{margin-bottom:30px;}
}
	/*wielki monitor*/
@media (min-width: 1200px)  {
   .logoreklamy {width:20%;float:left;text-align:center;margin-bottom:15px;margin:0 auto;}
   .logojpg{width:240px;height:270px;}
   #boxmain{padding-left:2%;width:80%;float:right;text-align:center;margin-bottom:30px;}
   .reklama{ width:180px; height:90px;}
   .logo{margin-bottom:30px;}
  }
</style>

Jak wstawić te obrazki do żółtego div`a?  W chwili obecnej taki jest efekt: