Negative Margins on a fixed navlist

Question

So basically what I have is a main container div with all of the content. I want a fixed vertical nav list to appear at the side of the container.

The problem appears when I resize the window to look at different resolutions. I'm using a fixed width in my container of about 1024px right now with a min-width of 1200px but it still cuts off part of the fixed navlist becuase I'm using a -125px margin on the nav container to get it outside of the content container.

Here's what it looks like normal

enter image description here

Then when resized down and the min-width I have set kicks in

enter image description here

Here is the code of the nav .nava { float:left; position:fixed; margin-left:-125px; text-align:right; }

Could you add your html code as well? And you can use jsfiddle.net to put your code example. — VKen
Hmm there are so many approaches to solve this positioning issue. I'm not sure If I interpreted your question correctly. Here's an updated fiddle. Please note, this is a very fragile fix, should your width of the .nava bar change, it is going to run into the container. The other way to fix the menu to be by the side of the container, needs manually setting the left css property to offset, fiddle here. Both uses absolute positioning, with the latter one having position:relative; applied to .container. — VKen
@VKen unfortunately the reason this problem is so difficult is that I want it to remain position:fixed ... so making it absolute or relative only fixes the issue of the margin cutting through the browser. Is there some way to maybe to affix another container to the side of the centered one and then fixed position the nav? I'm still not sure what can be done. — user1733259
position:fixed will set the .nava container to be fixed to the screen's viewport. That means it'll stick there strictly even when you scroll on both the x-axis and y-axis on a smaller screen and will block out what is underneath. Is that what you want? There's a solution for that too. — VKen

Sean Vaughn Sean Vaughn · Accepted Answer · 2012-10-10T05:03:17

.nava
{
    float:left; 
    position: fixed;
    min-width: ??px         //Set your minimum needs here.
    max-width: ???%;        //preferably % because you don't know the maximum
    padding-left: -125px;   //!!!
    text-align:right; 
}

Never use margin when your intention is padding, NEVER!

Negative Margins on a fixed navlist

1 Answers