Horizontal centering of fixed position div not working

**Rally** · Sep 10, 2007 06:09

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>

**all4nerds** · Sep 10, 2007 07:18

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>

**Rally** · Sep 10, 2007 07:45

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

**all4nerds** · Sep 10, 2007 07:55

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>

User Tag List

Thread: Horizontal centering of fixed position div not working

Thread Tools

Display

Horizontal centering of fixed position div not working

Bookmarks

Bookmarks

Posting Permissions