Как центрировать фиксированные позиции, div с динамической шириной [диаграмма включена]?

Question

У меня есть фиксированная ширина, относительно позиционированный и центрированный #content div (показанный как внешнее красное поле ниже).Вверху этого div мне нужно поместить два div заголовка с фиксированной позицией, один слева от центра и один справа от центра (центральная линия показана пунктирной красной линией).

Эти два div заголовка имеют динамическую ширинуи должны быть закреплены сбоку по направлению к центру (показано жирным черным цветом).Когда они увеличиваются в размерах, их внешний край должен простираться к периметру (показан черными стрелками).

Я думал, что смогу добиться эффекта с чем-то вроде этого, но не повезло:

#leftheader { position:fixed; top:0; left:50%; margin-right:10px; }
#rightheader { position:fixed; top:0; right:50%; margin-left:10px; }

Диаграмма:

Вся помощь очень ценится.Спасибо!

Answer 1

Я бы сделал это: (зная, как вы сказали, что контейнер имеет фиксированную ширину, скажем, 800px)

Расположите левый div с его правым в центре контейнера;

Поместите правый div с его левым в центр контейнера;

Оба div должны иметь max-width.(для этого примера я убрал поле, чтобы вы увидели мою точку зрения).

Итак:

#leftheader {
   position: absolute;
   top:0;
   right:400px;
   max-width: 400px;
 }

#rightheader {
   position: absolute;
   top:0;
   left:400px;
   max-width: 400px;
 }

Answer 2

Вот решение Я придумал.Он использует всего 4 контейнера, чтобы выполнить то, что вы хотите.Просто удалите цвета фона из leftHold и rightHold

HTML

<div id="leftHold">
    <div id="leftHeader">TEST1234</div>
</div>
<div id="rightHold">
    <div id="rightHeader">TEST</div>
</div>

CSS

body{padding:0px;}

#leftHold{width:50%; float:left; height:40px;background:#ccc;}  
#leftHeader{ float:right; margin-right:10px; background:#ffc;}

#rightHold{width:50%; float:right; height:40px;background:#ddd;}
#rightHeader{ float:left; margin-left:10px; background:#ffc;}