Могу ли я создать макет из двух столбцов, который плавно адаптируется к узким окнам?

Я пытаюсь создать страницу с двумя столбцами содержимого, div # left и div # право. (Я знаю, что это неправильные семантические идентификаторы, но это упрощает объяснение) Ширина обоих столбцов фиксирована.

Желаемый результат - Широкое окно просмотра

Когда окно просмотра слишком узкое, чтобы отображать оба столбца рядом , Я хочу, чтобы #right располагалось поверх #left , например:

Желаемый результат - узкое окно просмотра

Моей первой мыслью было просто применить float: left в #left и float: right в #right, но это заставляет #right прикреплять к правой стороне окна (что, в конце концов, является правильным поведением для float ), оставляя пустое место. Это также оставляет большой промежуток между столбцами, когда окно браузера действительно велико.

Неправильно - div # right не находится на одном уровне с левой стороной области просмотра

Применение float: left к оба divs приведут к тому, что неправильный будет перемещаться вниз, когда окно слишком маленькое.

Неправильно - div # right не находится поверх div # left

Я, вероятно, мог бы сделать это с помощью медиа запросы, но IE не поддерживает их до версии 9. Порядок исходников не важен, но мне нужно что-то, что работает как минимум в IE7. Можно ли обойтись без использования Javascript?