SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Horizontal centering of fixed position div not working

    Hi!

    I want to create a popup window that should have a fixed position (i.e. fixed to the viewport and not moving if the user scrolls the page). The popup should also be horizontally centered. (The popup effect will be implemented using ECMAScript and changing the visibility.)

    Using the code below, the centering is not working and I can't understand why.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    
    <html>
    
    <head>
    
    	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    	<title>Test</title>
    
    	<style type="text/css">
    
    		.wrapper {
    			position		: relative;
    			border			: 1px dashed gray;
    			height			: 1500px;
    		}
    
    		.popup {
    			position		: fixed;
    			border 			: 1px solid blue;
    			width			: 300px;
    			margin			: 150px auto 150px auto;
    			padding			: 5px;
    		}
    
    	</style>
    
    </head>
    
    <body>
    
    <div class="wrapper">
    	<div class="popup">
    		<p>
    			Box that should have a fixed position and be centered.
    		</p>
    	</div>
    </div>
    
    </body>
    
    </html>

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    A bit tricky cross browser
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <title>Test</title>
    <!-- saved from url=(0022)http://www.domain.com/ -->
    <style media="all" type="text/css">
    <!-- 
    *{padding:0;margin:0;}
    html, body{
    height:100&#37;;
    overflow:hidden;
    }
    
    .wrapper{
    height:100%;
    overflow:auto;
    position:relative;
    z-index:2;
    }
    
    .content{
    border:1px dashed gray;
    height:1500px;
    
    }
    
    .popup{
    position:absolute;
    border :1px solid blue;
    width:300px;
    left:50%;
    top:150px;
    margin-left:-150px;
    padding:5px;
    }
     -->
    </style>
    </head>
    <body>
    
    
    <div class="wrapper">
    
    <div class="content">
    <p>
    Test Text <br>Test Text <br>Test Text <br>Test Text <br>Test Text <br>Test Text <br>Test Text <br>Test Text <br>Test Text <br>Test Text <br>Test Text <br>Test Text <br>Test Text <br>Test Text <br>Test Text <br>Test Text <br>Test Text <br>Test Text <br>Test Text <br>Test Text <br>Test Text <br>Test Text <br>Test Text <br>Test Text <br>Test Text <br>Test Text <br>Test Text <br>Test Text <br>
    </p>
    </div>
    
    </div>
    
    <div class="popup"><p>Box that should have a fixed position and be centered.</p></div>
    
    
    </body>
    </html>

  3. #3
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, that seems to work. Can you please explain why my attempt doesn't work and how your solution does the trick? I really don't like to use things that and I do not fully understand

  4. #4
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    A position usually needs a minimum of 2 values out of four: top right bottom left , (and sometimes + a width)

    IE < 7 can use these values but only 2 per container, modern browser can use four values per container

    Position fixed is also not available in IE < 7 ( a left + top + margin-left -150px makes your example run but not in IE < 7 )

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    
    <html>
    
    <head>
    
    	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    	<title>Test</title>
    
    	<style type="text/css">
    	<!-- 
    	p{margin:0;padding:0;}
    
    		.wrapper {
    			position		: relative;
    			border			: 1px dashed gray;
    			height			: 1500px;
    		}
    
    		.popup {
    			position		: fixed;
    			border 			: 1px solid blue;
    			width			: 300px;
    			margin-left		:-150px;
    			
    			left:50&#37;;
    			top:150px;
    		}
    
    .popup p{padding: 5px;}
    
    		* html .popup{position:absolute;}
    		 -->
    	</style>
    
    </head>
    
    <body>
    
    <div class="wrapper">
    	<div class="popup">
    		<p>
    			Box that should have a fixed position and be centered.
    		</p>
    	</div>
    </div>
    
    </body>
    
    </html>
    Last edited by all4nerds; Sep 10, 2007 at 08:47.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •