BertHileman.com

So this is not a C# or .Net specific post, but I ran into a problem and needed a solution. I am working on a project where the Ajax ControlToolkit was just not an option. I therefore decided to do my own “modal popup” controls by using some fixed divs. I like fixed divs because then if there is a scroll bar on the page the divs continue to take up the full page. The issue with this is that when you use fixed positioning or absolute positioning you can’t set the margin to auto to make it center the div as it would in normal page flow layout. This means you need to implement some kind of left or right positioning.
After failing to come up with an adequate solution to this issue I found a post here: http://www.webdeveloper.com/forum/showthread.php?t=104109 that contained the answer to the question.
You simply change your styling to be the following:

.PopUpContent
{
  postion:fixed;
  top: 100px;
  left: 50%; /*this will put the left edge 50% of the way across the screen*/
  margin-left: -<1/2 the width of the div>px; /*this will drag the content back the stated number of pixels*/
}

It just works. I’ve tried it in IE 7, 8 and FF. I am guessing we’ll get similar results in Chrome and Safari as well but I didn’t bother to test those just yet.
Again, this post is more for my reference than anything else but if you find it useful you are welcome to use it!

No related posts.

Filed under:
CSS, Positioning, Styling by Bert