С плавающей моделью надо поломать голову. Без приведения мыслей в письменный порядок развитие концепции зайдет в тупик. Надо освободить голову от вариаций. Задача - сделать максимально удобным обзор информации об империи на максимальном числе разрешений, в том числе и на маленьких экранах. Также необходимо минимизировать перемещения основных блоков при смене игрового контента (длин названий планет, количества ресурсов и флотов).
Все размеры в верстке заданы в емах. Один ем берется не из браузера, а из CSS верстки (1em=10px). Сделано с учетом на будущее (потенциальное) применение скрипта увеличения масштаба и чтобы не было сюрпризов масштабирования при задании пользовательского размера шрифта в браузере.
С блоком меню ясно - ширина в 100% общего контейнера (в дальнейшем контейнера), высота растягивается размером шрифта меню.
Блок планет прилипает к левой части контейнера. От ширины блока зависит положение следующего блока построек. Задача - добиться компромисса между стандартизацией внешнего вида и полнотой отображения названия планет.
Лично я считаю корректным название планеты максимум в 8-10 символов, остальное - баловство. Но подход демократический, если есть возможность назвать в 20 символов, то надо ее использовать по полной.
Наиболее выигрышно в плане восприятия ставить название планеты именно под изображение планеты (а не блока планета + луна) с выравниваем по середине, а в случае названия, большего ширины изображения планеты, делать небольшой отступ от левого края.
Первый вариант. Высота фиксирована максимальным значением планет (9) плюс высотой их названия в одну строчку. Ширина задается самым длинным названием планеты юзера (20 символов).
(блок планет смещает блоки юнитов и продуктов вправо, растягивая контейнер, следовательно при недостатке ширины экрана образуется полоса прокрутки, наказывая любителя длинных названий, имеющего монитор с разрешением разрешением шириной в 1024px и установившего размер одного ема в 10px, но в случае широкоэкранного монитора, использующий его преимущество - что вполне справедливо)
Второй вариант. Высота плавающая за счет разрешения переноса названия планет (через пробел или виды дефиса). Ширина задается самым длинным безпробельным или бездефисовым названием планеты юзера (20 символов).
(за счет двух строчек в результате переноса в коротких названиях потипу (Las-Vegas) определение дислокации планеты по имени затрудняется, блок планет смещается как и в первом варианте, горизонтальная полоса аналогична первому варианту, вертикальная полоса общей прокрутки возникает в случае одного ема в 10px и высоты разрешения экрана в 768px)
Третий вариант. Зафиксировать ширину исходя из ширины изображения луны и планеты плюс пара емов. Остальное название сделать невидимым.
(в этом случае не используется преимущество широкоэкранных мониторов, блок планет выглядит насильственно обрезанным, а добавление многоточия лишь усугубит картину, занимая драгоценное место)
Т.к. вставляя пробел или дефис в название планеты, юзер вряд ли хочет видеть перенос в блоке планет, а не использовать преимущество широкоэкранных мониторов не кошерно, то первый вариант самый лучший.
Эффекты наведения на планету лучше сделать одинаковыми по размеру, чему и удовлетворяет первый вариант.
В абсолютном большинстве случаев блок юнитов вместе с блоком флотов (плюс меню) формируют высоту видимой части сайта. Т.к. блок флотов должен получать выгоду от большого пользовательского разрешения - вмещать больше фиксированных по высоте в емах строчек текущих флотов, то высота блока флотов однозначно должна быть в процентах от общей высоты. К тому же логично прижать нижний край блока флотов к низу экрана.
Блок юнитов не должен вызывать общей вертикальной прокрутки, но и квадраты юнитов не должны заезжать на блок флотов в случае малых разрешений. Поэтому нижний край нижнего квадрата юнита должен растягивать блок юнитов и в пограничном состоянии с блоком флотов должен тянуть последний вниз, вызывая вертикальную полосу прокрутки.
В настройках логично сделать яваквери ползунок, изменяющий размер одного ема в пикселях, тем самым, масштабируя наш эластичный дизайн. Если удастся прикрутить такую функцию, то смысл нижеследующих рассуждений теряется, т.к. функция делает получаемые варианты идентичными при пользовательском вмешательстве. В принципе, таким образом можно прикрутить и автомасштабирование, основанное на появлении хотя бы одной общей полосы прокрутки, тогда будет вообще замечательно.
Основная задача блока построек - сделать оптимальным восприятие информации внутри квадратов юнитов, четкое дислоцирование взгляда на количестве ресурсов и удобное соотнесение информации о ресурсах и складах. Квадраты юнитов можно расположить так.
Первый вариант. С разнесением по высоте экрана путем отступа в процентах от нижнего края вышележащего юнита.
(при высоких разрешениях имеем небольшие равномерно разнесенные по высоте квадраты юнитов, без вмешательства масштабирования взгляду нужно пробегать по относительно (видимых размеров квадратов юнитов) большой траектории для анализа информации внутри юнитов)
Второй вариант. Путем отступа в емах от нижнего края вышележащего элемента.
(при больших разрешениях имеем небольшие квадраты юнитов, взгляд пробегает оптимальную траекторию для анализа данных внутри юнитов)
Итого размеры блока юнитов должны полностью определяться размерами квадратов юнитов, в него входящих. Блок флотов - классический футер, постоянно прижатый к низу страницы, высотой в 20% от общей высоты. А т.к. наверняка будет реализовано масштабирование с помощью яваквери ползунка и с целью оптимизации длины траектории взгляда при анализе информации внутри квадратов юнитов, то расположение квадратов юнитов логично сделать путем отступа в емах от нижнего края вышележащего элемента.