Layout a tre colonne di cui due tipo Pinterest e terza fissa a destra

Salve, sto lavorando per rendere responsive il mio sito senza stravolgerlo troppo.
La struttura che sto cercando di ottenere è quella mostrata in figura
http://i64.tinypic.com/wkohhw.png
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.