¿Cómo mantener la div posición fija alineada con div centrado?

Question

No estoy seguro de cómo titular la pregunta. Tengo una estructura HTML así:

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

Con un poco de css de esta manera:

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

El envoltorio es más ancho que el contenido, y el contenido se centra en el envoltorio. Mi problema es mantener el nav div, que se fija en la parte superior de la página, centrado/alineado con el contenido div cuando la ventana es más pequeña que el div envoltorio. Los problemas surgen cuando se desplaza hacia la izquierda y hacia la derecha, el div fijo permanece centrado en la ventana y el div de contenido se desplaza hacia la izquierda y hacia la derecha. Estoy tratando de lograr esto sin javascript.

Aquí hay un jsfiddle de lo que estoy encontrando, cambie el tamaño de la ventana de resultados para ver cómo el nav div no se mantendrá centrado/alineado con el contenido div cuando la ventana sea más pequeña que el div wrapper.

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

Gracias de antemano!

Answer 1

La solución más fácil sería poner #nav en su #wrapper y darle un margen horizontal de 25 píxeles:

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

Véase también la fiddle .

Answer 2

Creo que usted puede agregar margin: 0 auto para la navegación también.

Luego nav se colocará en el elemento principal como envoltorio, centrado. pero eliminado el navegador de forma fija position:fixed lo coloca en la ventana del navegador y fuera del flujo narmal. ¿Es eso lo que quieres?

Answer 3

Sería más apropiado poner el navegador dentro del contenedor, justo encima del contenido.

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

El CSS de la navegación puede tener márgenes izquierdo y derecho de 25px. También el posicionamiento absoluto y el ancho no son necesarios.

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

Consulte este violín: http://jsfiddle.net/p2Mzx/20/

Answer 4

Puede fijo la NAV y el contenido para dar padding-top.

Considerar este enlace jsfiddle