Iframe jako responsive Opcje

[piotr485]

Witam, mam taki problem otóż mam taki układ strony:
Z lewej długi wysoki div, a z prawej dwa o połowę niższe divy przylegające do niego.

Oto mój kod:

[HTML] pobierz, plaintext 
<style type="text/css">
 
	body {
 
		margin:0 auto;
		max-width: 1200px;
		padding:0px;
		outline:none
		font-size: 12px;
		color: white;
		font-family: Verdana;
		background: #ebf1f8;	
		color: #949494;	
	}
 
 
	#lewa {
 
		float: left;
		width: 50%;
 
	}
 
	#prawa {
 
		float: left; 
		width: 50%;
 
 
	}
 
	.video {
		position: relative;
		padding-bottom: 56.25%;
		padding-top: 0px;
		height: 0;
		overflow: hidden;
	}
 
	.video iframe {
		position: absolute;
		top:0;
		left: 0;
		width: 100%;
		height: 50%;
	}
 
 
 
	</style>
 
 
	<div id="lewa"><img src="images/reklama_lewa.jpg" style="width: 100%; max-width: 600px;"></div>
	<div class="video" id="prawa">
		<iframe height="258" width="600" src="https://www.youtube.com/embed/" frameborder="0" allowfullscreen></iframe>
	</div>
 
	<div class="video" id="prawa"><iframe src="iframe.html" height="258" width="600"></iframe></div>
 
 
[HTML] pobierz, plaintext 

Klasę video znalazłem na internecie i nie do końca ją rozumiem, ale działa dobrze z tym, że w tym przypadku nie do końca - źle się układają divy.

Przy tym kodzie z lewej jest reklama, a z prawej ramka z tym, że druga ramka nie jest tuż pod spodem tylko z wielką luką.

Jak usunę class="video" z diva to układa się prawidłowo więc gdzies jest problem z tą klasą tylko nie bardzo wiem jak to poprawić.

Teraz wygląda tak:


a chodzi o to aby ta niebieska iframe byla pod zielonym.

Ktoś pomoże?

Z góry dziękuję