CSS Fixed position with Auto Margin

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;
    po开发者_如何学编程sition: relative;
}

#left {
    width: 700px;
    float: left;
}

#right {
        width: 500px;
        position: fixed;
        top: 0px;
}

---

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

---

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.

---

I like to use a wrapper as asolution for this problem:

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