Как исправить проблему блоков на css?

Question

[Никита]

Есть макет он тянется в зависимости от дисплея и имеет следующие показатели:

#container {
min-width: 1024px;
max-width: 1400px;
}

Соответственно есть 2 блока (как у Хабра): контент (тянется в зависимости от размера дисплея) и сайтбар (фиксирован по ширине 300px). Между этими двумя блоками промежуток в 20px.
И их CSS:

#content {
float: left;
min-height: 1px;
overflow: hidden;
padding-right: 20px;
position: relative;
width: 67%;
}
#sidebar {
 float:left;
 width:300px;
 position: relative;
 background: url(../images/live-bac.png); 
}

При разрешении в 1200px монитора, все блоки стоят на месте и всё гуд, если разрешение монитора 1024 или просто уменьшить размер браузера, то сайтбар сползает вниз под блок контента. Если же размер экрана больше 1200px, то блок контента растягивается не до конца и образуется пустота справа.

Увы я не профи в вёрстке, поэтому вопрос: где я мутировал?

Answer 1

[Никита]

Товарищи, сделал вот такое решение:

#content {
	float: left;
	overflow: hidden;
	padding: 0 320px 0 0;
}
#sidebar {
	float: left;
	width: 300px;
	margin-left: -300px;
	position: relative;
	background: url(../images/live-bac.png); 
}

в Chrome и FF всё гуд, а в IE 10 при уменьшении размера открытого окна браузера сайтбар слетает вниз.

Answer 2

[Maksim Zverev]

Тоесть вас не смущает, что в одном блоке вы пользуете % для задания ширины, а в другом в px?

Comments

[Никита]

Выше в комментарии я переделал, но теперь проблема с IE.

Answer 3

[Евгений Низамиев]

#content {
min-height: 1px;
overflow: hidden;
padding-right: 20px;
position: relative;
  background:green;
  height: 200px;
}
#sidebar {
 float:left;
 width:300px;
  height: 200px;
 position: relative;
 background: red; 
}