Centring a div in NS

**Owain** · Oct 4, 2002 02:07

I want to have a div in the centre of the screen without using tables, so I have decided to use JavaScript, however it works in IE and NS 4.7 but not NS 6. I have written 2 functions, one to get the div (getElement), and one to move it (centreDiv). Here they are:

Code:

function getElement(myID)
{
	if(document.layers){
		return document.layers[myID];}
	else if(document.all){
		return document.all[myID].style;}
	else{
		return document.getElementById(myID).style;}
}

function centreDiv(myDiv, divHeight, divWidth)
{
	if (window.innerWidth)
	{
		var windowWidth = window.innerWidth
		var windowHeight = window.innerHeight
	}
	else if (document.all)
	{
		var windowWidth = document.body.clientWidth
		var windowHeight = document.body.clientHeight
	}
	else
	{
		var windowWidth = 0
		var windowHeight = 0
	}

	if (windowWidth > 0 && windowHeight > 0)
	{
		getElement(myDiv).top = parseInt((windowHeight / 2) - (divHeight / 2));
		getElement(myDiv).left = parseInt((windowWidth / 2) - (divWidth / 2));
	}
}

And then in HTML I open the div then call the centreDiv function, thus:

Code:

<div class="backimage" id="mainPannel">
	<script language="JavaScript" type="text/javascript">
	<!--
	centreDiv("mainPannel", 400, 749);
	//-->
	</script>
</div>

The div is set to a width and height of 400 and 749 respectively in CSS. The div looks fine in both IE and NS however it is in the top left of the screen in NS 6 and centred in IE and NS 4.7.

Has anyone got any ideas?

Thanks in advance.

**beetle** · Oct 4, 2002 07:48

Why use javascript when you can use CSS?

Here's a post on another forum that addresses this exact issue...

**Owain** · Oct 4, 2002 07:55

Thanks for your help.

I would love to use CSS but I can't find a way of doing it. I have a div which is a set width and height, and it needs to stay that way. How do you centre that in the middle of the screen (both horizontal and vertical) on all screen resolutions? Oh and it is an XHTML page so I don't want to use tables.

**beetle** · Oct 4, 2002 09:51

Well, the problem with you code is first you aren't accessing the style object first, before modifying the top and left properties. Also, with XHTML, document.body.clientHeight will return 0, so you will never make that calculation anyway. ALL that aside...here's a tester page I did...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Centering Test</title>
<style>
div#content {
	width: 500px;
	height: 400px;
	border: 1px dashed #999;
	background-color: #EEE;
	color: #000;
	padding: 10px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -211px;
	margin-left: -261px;
	}
html,body {
	height: 100%;
	margin:0px;
	padding: 0px;
	}
</style>

</head>

<body >
<div id="content">Yeeehaw! We've got a centered one!</div>
</body>
</html>

User Tag List

Thread: Centring a div in NS

Thread Tools

Display

Centring a div in NS

Bookmarks

Bookmarks

Posting Permissions