Salve, sto lavorando per rendere responsive il mio sito senza stravolgerlo troppo.
La struttura che sto cercando di ottenere è quella mostrata in figura

I due blocchi azzurri sono riuniti in un div e gestiti da un javascript che li organizza "tipo Pinterest" al ridursi della larghezza dello schermo. Il div arancione invece vorrei che restasse fisso a destra fintanto che la larghezza dello schermo è sufficiente per contenere una colonna azzurra e quella arancione, purtroppo succede che il div arancione è il primo a scivolare sotto al contenitore dei div azzurri.

Questo è il codice del contenitore dei div azzurri:
Codice:
#article { 
	position: relative;
	float: left;
	width: 708px;
	height: auto;
	background-color: inherit;
}
Il codice dei singoli div azzurri:
Codice:
.section { 
	padding: 0px 2px 0px 2px;
	width: 350px;
	text-align: center;
	background-color: inherit;
	margin-bottom: 10px;
}
Il codice del div arancione:
Codice:
aside { 
	position: relative;
	float: left;
	padding: 0px 2px 0px 2px; 
	width: 250px; 
	height: auto;
	font-size: 13px; 
	text-align: center; 
	background-color: inherit; 
}
Con media query il css diventa come segue...
Codice:
#article { 
	position: absolute;
	top: 0px;
	left: 0px;
	float: left;
	width: auto;
	margin-left: auto;
	margin-right: auto;
	min-width: 354px;
	max-width: 708px;
	height: auto;
	background-color: inherit;
}

.section { 
	padding: 0px 2px 0px 2px;
	width: 350px;
	text-align: center;
	background-color: inherit;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
}
Non capisco cosa non funziona.