CODEWITHSUNDEEP
htmlcssalignmentcss-position
codybuell
codybuell

Reputation: 338

How to keep fixed position div aligned with centered div?

Not sure how to title the question. I have an html structure like this:

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

With some css like this:

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

The wrapper is wider than the content, and the content is centered in the wrapper. My problem is keeping the nav div, which is fixed to the top of the page, centered/aligned with the content div when the window is smaller than the wrapper div. Issues arise when you scroll left and right, the fixed div stays centered in the window and the content div scrolls left and right. I'm trying to accomplish this without javascript.

Here's a jsfiddle of what I'm running into, resize the results window to see how the nav div won't stay centered/aligned with the content div when the window is smaller than the wrapper div.

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

Thanks in advance!

Upvotes: 6

Views: 6411

Answers (4)

Eleven
Eleven

Reputation: 1

I think you can add margin: 0 auto for nav too.

Then nav will be positoned to parent element just like wrapper,centered. but removed fixed form nav. position:fixed makes it positioned to the browser window and out of narmal flow. Is that you want?

Upvotes: 0

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

You can fixed the nav and content to give padding-top.

Consider this link jsfiddle

Upvotes: 0

angelorohit
angelorohit

Reputation: 1

It would be more appropriate to put the nav inside the wrapper, just above the content.

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

The CSS of the nav can have left and right margins of 25px. Also absolute positioning and the width is not needed.

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

Please see this fiddle: http://jsfiddle.net/p2Mzx/20/

Upvotes: 0

jeroen
jeroen

Reputation: 91734

The easiest solution would be to put #nav in your #wrapper and give it a horizontal margin of 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;
}

Also see the fiddle.

Upvotes: 5

Related Questions