PaulZi

Как вариант, задействовать display: flex и расставить соответствующие order: n

Поменяйте местами блоки .top и .right. То есть .right должен быть первее, чем .top, т. к. он идёт у вас как float: right.

white-space: nowrap;
overflow: visible;

Я думаю, такое можно только с css media queries провернуть — http://jsfiddle.net/ArT8Q/

На чистом CSS2 без JS вряд ли такое получится. По крайней мере со всеми условиями (чтобы и overflow-y был, и не фиксированная шапка).
Ну а в CSS3 для этого есть Flexbox layout.
Я бы рекомендовал применить небольшой JS-скриптик, вычисляющий высоту блока с overflow-y и применяющего его.

Для выравнивания по вертикали нужно либо выставить у родительского элемента display: table-cell и vertical-align: middle, не будет правда работать в ie7. Второй вариант — использовать line-height: 100% у дополнительного мест минского э элемента, и обоим им ввыставить vertical-align middle.
Извиняюсь, что описываю текстом — с телефона пишу.

Для того, чтобы родительский блок «схлопывался» до размеров самого большого блочного элемента, нужно использовать у родительского блока display: table.
Подробнее смотрите тут: habrahabr.ru/qa/28701/