Ralpharama Archive. The archive is almost 20 years old, this website is no longer maintained.

Home | New Writing | Old Writing | Cooking | Technical | Wine Making | Cocktails
   
 
Article

Use CSS to position an element relative to centre of window

Hits 2364 | Created 2011-05-09 | Modified 2011-05-09

How do I position a div relative to the center of the screen, that resizes with the browser window? Useful if you have a centred layout and want something to be positioned outside the edge, e.g. a faded shadow to the right of your main content section.



This foxed me for a while.

Solution: Use a position absolute, with a left of 50%, and a left margin of the desired size.

e.g.

<div style="position:absolute;left:50%;margin-left:200px;width:50px;height:50px;">Hello!</div>

This generates a div that is always positioned 200 pixels to the right of centre.




Make a Comment

Name
Comment


Antispam Code (always a number)

Enter Code Above
Submit

Note: All HTML will be removed except for bold and italics. Links will not display. Line breaks are added automatically. Use <pre>...</pre> for code.

Tags

This item has the following tags:


Useful? Donate for hosting costs

All content copyright (c) Ralpharama