CSS Fixed position with Auto Margin

Question

I want a component that keeps horizontal center of the page (two-columns), and I have a sub-component (right column) that I want its position to be fixed, so the sub-component's position to be fixed, but the whole two columns to be centered.

#content {     width: 1200px;     height:auto !important;     height:100%;     min-height:100%;     padding-top: 42px;     padding-bottom: 100px;     margin-auto: 0 auto;     position: relative; }  #left {     width: 700px;     float: left; }  #right {         width: 500px;         position: fixed;         top: 0px; } 

Answer 1

You can use margin: 0 auto with position: fixed if you set left and right.

.wrapper {     position:fixed;     top: 0;     left: 0;     right: 0;     width: 500px;     margin: 0 auto; } 

This also works with position: absolute; and vertically.

Demo: http://codepen.io/pstenstrm/pen/myaWVJ

Answer 2

You cant do that with margin:auto, but you can do something like this:

#CSS-SELECTOR-YOU-ARE-USING{     background:#FF0000; // Just so you can see whats going on     position:fixed; // Position the element     right:50%; // Move it to the right for 50% of parent element     margin-right:-250px; // You need here to put 1/2 of what you have below in width     width:500px; } 

This way you move element to the right for 50%, and then move it back for half of its width. That way you get centered element with position:fixed.