Как сохранить фиксированную позицию div по центру div?

Question

Не уверен, как озаглавить вопрос.У меня есть структура HTML, как это:

<div id="nav"></div>
<div id="wrapper">
   <div id="content">
   </div>
</div>​

С некоторыми CSS, как это:

#nav {
    width: 200px;
    height: 50px;
    margin: 0 0 0 -100px;
    position: fixed;     
    left: 50%;
    background: red;
}

#wrapper {
    width: 250px;
    height: 1000px;
    margin: 0 auto;
    background: blue;
}

#content {
    width: 200px;
    height: 1000px;
    margin: 0 auto;
    background: green;
}

Оболочка шире, чем содержимое, и содержимое центрируется в оболочке.Моя проблема заключается в том, чтобы держать div div, который зафиксирован в верхней части страницы, по центру / выравниванию с содержимым div, когда окно меньше, чем div оболочки.Проблемы возникают при прокрутке влево и вправо, фиксированный div остается в центре окна, а div содержимого прокручивается влево и вправо.Я пытаюсь сделать это без javascript.

Вот jsfiddle того, с чем я сталкиваюсь, измените размер окна результатов, чтобы увидеть, как div nav не будет центрирован / выровнен с div содержимого, когдаокно меньше, чем разделитель оболочки.

http://jsfiddle.net/p2Mzx/1/

Заранее спасибо!

Answer 1

Самое простое решение - поместить #nav в ваш #wrapper и задать для него горизонтальное поле 25px:

HTML:

<div id="wrapper">
   <div id="nav"></div>
   <div id="content">
   </div>
</div>

CSS:

#nav {
    width: 200px;
    height: 50px;
    margin: 0 25px;
    position: fixed;  
    top: 0;   
    background: red;
}

#wrapper {
    width: 250px;
    height: 1000px;
    margin: 0 auto;
    background: blue;
}
#content {
    width: 200px;
    height: 1000px;
    margin: 0 auto;
    background: green;
}

Также см. Скрипку .

Answer 2

Вы можете исправить навигацию и контент, чтобы дать padding-top.

Рассмотрим эту ссылку jsfiddle

Answer 3

Было бы более уместно поместить навигацию внутри оболочки, чуть выше содержимого.

<div id="wrapper">
   <div id="nav"></div>
   <div id="content"></div>
</div>​

CSS навигации может иметь левое и правое поля по 25 пикселей. Также абсолютное позиционирование и ширина не нужны.

#nav {  
    height: 50px;
    margin: 0px 25px 0px 25px;
    background: red;
}

#wrapper {
    width: 250px;
    height: 1000px;
    margin: 0 auto;
    background: blue;
}

#content {
    width: 200px;
    height: 1000px;
    margin: 0 auto;
    background: green;
}​

Пожалуйста, посмотрите эту скрипку: http://jsfiddle.net/p2Mzx/20/

Answer 4

Я думаю, вы можете добавить margin: 0 auto для навигации тоже.

Тогда nav будет помещен в родительский элемент, как обертка, по центру. но убрал исправленную форму nav. position:fixed делает его позиционированным в окне браузера и выходящим из-под контроля. Вы этого хотите?