Адаптивные блоки

[Suprun4uk]

Здравствуйте, подскажите как решить проблему: хочется сделать адаптивный дизайн, застрял практически в самом начале. 

 

вот что имеется: 

 

идея такая.

Это полный размер:

 

 

а это мелкий :

 

я набросал кое что, оно работает но я уверен что не правильно: 

 

Css

#header_line{	width: 100%;	height: 500px;	background: url(../images/header.png) #333;}#contener{ max-width: 1000px; height: 500px; margin: 0 auto;}#block_contener{	display: inline-block;}#block1{	width: 500px;	height: 500px;	background: #eee;	float:left;}#block2{	width: 500px;	height: 500px;	background: #000;	float: right;}@media screen and (max-width: 350px) {#contener{ max-width: 1000px; height: 500px; margin: 0 auto;}#block_contener{	display: block;}#block1{	width: 91%;	max-height: 220px;	background: #eee;	float:left;	margin: 5% 5% 5% 4%;}#block2{	width: 91%;	max-height: 220px;	background: #000;	float: right;	margin: 1% 5% 5% 4%;}}

html

<div id="header_line">	<div id="contener">		<div id="block_contener">		<div id="block1"></div>		<div id="block2"></div>	</div></div>

Помогите разобраться очень прошу. 

[xsladfs]

 

 

при нужном разрешении(через медиа запросы) делаешь элементы не плавающими(отменяешь флоаты)

Edited March 9, 2015 by xsladfs

[Suprun4uk]

Спасибо сейчас буду пробовать