EnterateNorte EnterateNorte - 4 months ago 11
HTML Question

Setting a DIV in a specific place on a site with CSS

I'm trying to place a DIV on a specific are of my site, using this code:

<div style="position: fixed; left: 780px; right: 0; width:285px; z-index:9999; display:block; top:60px; color: #000; background-color:#fff; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px; box-shadow:0px 2px 5px #303030;">TEXT</div>


And it works well on my screen, because my screen resolution is 1240px width (The REMEMBER small notice is the DIV im trying to set):
The REMEMBER small notice is the DIV im trying to set

How ever, if I see the site on another computer with a different screen resolution, it changes the place where it is displayed, because it set 780px from the left.

Is there a way to set it up from the middle instead of the left (or right) margin?

Who can I do this?

Answer

there is an easy way to positionate from the middle:

CSS:

#your-container {
 position: fixed or absolute
 left: 50%
 width: must have a fixed width (eg 250px)
 margin-left: -(width / 2) plus or minus offset (eg: -(250px / 2) for centered position or -(250px / 2) + 100px for position 100px to the right from the center)
}

PS This is just to answer your question but i would also tend to the suggestion of @Hashem Qolami given in his comment!

PPS have a look this CODEPEN | maybe this strategy will work your scenario...

hope it helps :)