Блог

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

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

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

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

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

Расположите левый div так, чтобы правый был в центре контейнера;

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

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

Итак:

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

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