См. приложенный рисунок.

Голубой див предназначен для текстового меню. Т.е. ширина голубого дива должна быть такой, чтобы туда поместились хорошо читаемые текстовые ссылки ~20 символов.

Остальное пространство занимает зелёный див (там будут текстовые статьи). Если пространства не хватает (мобильный телефон), то зелёный див уходит вниз.

Нужно сделать максимально адаптивную вёрстку. Чтобы текстовое меню (голубой див) хорошо читалось на всех устройствах: мониторах, планшетах, телефонах.

Вёрстка должна работать и на старом 19-дюймовом мониторе с разрешением 1024*768, и на новом 8-дюймовом айпаде с разрешением 2048x1536 (исполнитель должен это проверить на реальных устройствах).

Всё должно быть выполнено на чистом CSS (блок @media).

Вопросы - сюда в комментарии.