[CSS] Position=fixed but Margin=auto

Question

Greetings.

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 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.