How to center fixed-position, dynamic-width divs [diagram included]?

I have a fixed-width, relatively positioned, and centered #content div (shown as the outer red box, below). At the top of this div, I need to place two fixed-position header divs, one left of center and one right of center (center line shown as dashed red line).

These two header divs have dynamic width and need to be anchored on the side toward the center (shown in bold black). When they grow in size, their outer edge should extend toward the perimeter (shown with black arrows).

I thought I could achieve the effect with something like this but no luck:

#leftheader { positi开发者_如何学运维on:fixed; top:0; left:50%; margin-right:10px; }
#rightheader { position:fixed; top:0; right:50%; margin-left:10px; }

Diagram:

All help greatly appreciated. Thanks!

Here is a solution I came up with. It uses 4 total containers to accomplish what you want. Just remove the background colors from leftHold and 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;}

I would do this: (knowing as you said, that the container has a fixed width, let's say 800px)

Position the left div with its right at the centre of the container;

Position the right div with its left at the centre of the container;

Both divs should have a max-width. (for this example I removed the margin, just so you see my point).

So:

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

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