Haluk ÜNAL Haluk ÜNAL - 1 month ago 21
CSS Question

how to set DIV position to 200 pixels to left of the center

I want to position a

DIV
200 pixels to left of the center.

I am currently using the following code, but on higher resolution displays (e.g. 1920×1080), the
DIV
was slipping out of position:

.hsonuc {
position: absolute;
top: 20px;
margin:auto;
margin-left:200px;
display:none;
}


What I want to achieve:



Illustrating a div that is positioned 200px to the left of the center of the page

Answer

Simply position it 50% from the right (right:50%;), and then push it over using margin-right:200px; (example).

HTML

<div class="hsonuc">DIV</div>

CSS

.hsonuc {
    position:absolute;
    top:20px;
    right:50%; /* Positions 50% from right (right edge will be at center) */
    margin-right:200px; /* Positions 200px to the left of center */
}