如何将固定位置的动态宽度div包括图表居中？

如何解决如何将固定位置的动态宽度div包括图表居中？

| 我有一个固定宽度，相对位置且居中的#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; }

图解： 所有帮助极大的赞赏。谢谢！     

解决方法

这是我想出的解决方案。它总共使用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;}

    ,我会这样做：（如您所知，容器的宽度是固定的，比方说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;
 }