Лучший способ добиться эластичного макета в 3-х цветах с чистым CSS, совместимым с X-браузером

Question

Я не уверен, что будет лучшим (кроссбраузерный) способ реализовать следующее с помощью CSS.

У меня есть div, ширина которого может изменяться динамически. Внутри этого div я хочу разместить еще один набор div, которые будут выступать в качестве индикаторов размера. Я хочу, чтобы они выглядели примерно так:

 ________________________
|                        |   <= outside div
|<------- 500px -------->|
|________________________|

Разметка, которую я ожидаю, полезна, это:

<div class="resizablediv">

    <div class="size-indicator-wrap">
        <div class="leftarrow"></div>
        <div class="panesize">500px</div>
        <div class="rightarrow"></div>
    </div>

</div>

Теперь я хочу:

1).panesize для центрирования внутри.resizablediv

2) ширина.panesize, чтобы соответствовать его содержимому (как, например, float или inline)

3) левая стрелка должна быть выровнена влево и правая стрелка выровнена вправо

3) ширина левой и правой стрелок занимает до половины оставшегося пространства; Внутренняя ширина.resizablediv минус внешняя ширина.panesize

Для стрелок div я буду использовать фоновые изображения, чтобы показать стрелки

Я могу сделать это путем пересчета размеров и установки всего, используя относительное и абсолютное позиционирование и т. Д. Но я хотел бы использовать чистый CSS, если это возможно.

Любой намек на то, как этого добиться, будет оценен.