Come mantenere il div di posizione fissa allineato al div centrato?

Question

Non sai come intitolare la domanda. Ho una struttura html come questo:

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

Con un po 'di CSS in questo modo:

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

L'involucro è più ampia rispetto al contenuto, e il contenuto è centrato nella confezione. Il mio problema è mantenere il div del nav, che è fissato in cima alla pagina, centrato/allineato al div del contenuto quando la finestra è più piccola del div del wrapper. I problemi sorgono quando si scorre a sinistra ea destra, il div fisso rimane centrato nella finestra e il contenuto div scorre a sinistra ea destra. Sto cercando di farlo senza javascript.

Ecco un jsfiddle di quello che sto correndo, ridimensionare la finestra dei risultati per vedere come il div di nav non resterà centrato/allineato con il div di contenuto quando la finestra è più piccola del div del wrapper.

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

Grazie in anticipo!

Answer 1

La soluzione più semplice sarebbe quella di mettere #nav nel vostro #wrapper e dargli un margine orizzontale di 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; 
} 

vedere anche la fiddle .

Answer 2

Penso che sia possibile aggiungere margin: 0 auto anche per nav.

Quindi nav verrà posizionato sull'elemento padre proprio come wrapper, centrato. ma rimosso modulo fisso nav. position:fixed lo posiziona nella finestra del browser e fuori dal flusso narmale. E 'quello che vuoi?

Answer 3

Sarebbe più appropriato inserire il nav all'interno del wrapper, appena sopra il contenuto.

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

Il CSS del nav può avere margini sinistro e destro di 25px. Anche il posizionamento assoluto e la larghezza non sono necessari.

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

Si prega di vedere questo violino: http://jsfiddle.net/p2Mzx/20/

Answer 4

È possibile fissato la navigazione e contenuti per dare padding-top.

Prendere in considerazione questo collegamento jsfiddle