Question

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 { position:fixed; top:0; left:50%; margin-right:10px; }
#rightheader { position:fixed; top:0; right:50%; margin-left:10px; }

Diagram:

All help greatly appreciated. Thanks!

Answer 1

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;}