HELP!: find window width? Center a <div>?

Kingherc · #1 06-Jul-2003, 01:39

Well here's my problem (a JavaScript problem i think):

I have a <div> on my page. I want that div to be shown over the document. But I also want the div to be in the exact center of the page or it won't look right.

I have tried many things, and played with the css styles of the position (top & left attributes). For a minute i got stuck on the ''left'' css attribute. The brightest solution was to enter 50% in the attribute but unfortunately that applies only to the edge, so the width exceeds the center and it doesn't look right again! I have the div's width but I don't know (well i don't know if it CAN happen) how to subtract it from a percantage like 50%-width would be great!

The next idea was to divide the window's width by two and then subtract the half of the div's width. But again, the window's width can only be determined in Netscape. In Internet Explorer I can't seem to find a way to find the window's width through JavaScript. Can anyone plz tell me how to find it??

(and my last solution was to put it inside the <center></center>, but that works only when the <div> is part of the document layer, which doesn't make it float over the document and, so, still doesn't seem right!)

Anyway, can anyone show me how to find the window's width in Internet Explorer or better yet how to center a ''floating'' div?? Thx 4 all responsed!!

JdS · #2 06-Jul-2003, 03:03

Hello Kingherc,

Interesting problem you have there... :)

OK, I tried to figure this out quickly but this is all I can come up with now...

Please let me know if it works for you otherwise someone else can give it some more thought.

Paste the following XHTML source into a test page and view it with a browser to see if I understood your question.

HTML Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Centering a &lt;div&gt;.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
 background-color:#FFFFFF;
 font:normal 12px verdana,arial,helvetica,sans-serif;
 color:#000000;
 width:auto; /* these affect how #centerme works */
 height:100%; /* see above */
 }

/*  ----  DIV  ----  */
div#main {
  background-color:darkblue;
  font:inherit;
  color:inherit;
  margin:auto;
  padding:auto;
  width:auto;
  height:auto;
  }

div#article {
  background-color:inherit;
  font:inherit;
  color:#FFFFFF;
  margin:auto;
  padding:auto;
  width:auto;
  height:auto;
  }
		
div#centerme {
  /* let's say you want to center this <div id="centerme">Something</div>
	   and make it 60% wide but centered on the screen.*/
  background-color:#FFFFCC;
  font:normal 12px verdana,arial,helvetica,sans-serif;
  color:darkred;
  margin:auto;
  padding:2%; /* we subtract this x 2 from the
	               width and height values below */
  width:56%; /* 60% - 4% = 56% */
  height:56%; /* see above */
	position:absolute;
	top:20%; /* 100% - 60% = 40% / 2 = 20% */
	left:20%;  /* same as above */
  }
-->
</style>
</head>
<body>
<div id="main">
    <div id="article">
      <h1>Test floating div.</h1>
			<h2>Sample Paragraph in Article.</h2>
      <p>This is a dummy article.
			  This is a dummy article.
			  This is a dummy article.
			  This is a dummy article.</p>
			<h2>Sample Paragraph in Article.</h2>
      <p>This is a dummy article.
			  This is a dummy article.
			  This is a dummy article.
			  This is a dummy article.</p>
			<h2>Sample Paragraph in Article.</h2>
      <p>This is a dummy article.
			  This is a dummy article.
			  This is a dummy article.
			  This is a dummy article.</p>
			<h2>Sample Paragraph in Article.</h2>
      <p>This is a dummy article.
			  This is a dummy article.
			  This is a dummy article.
			  This is a dummy article.</p>
		</div>
</div>
<div id="centerme">
	<p>This is a dummy article in the #centerme &lt;div&gt;.
		This is a dummy article in the #centerme &lt;div&gt;.
		This is a dummy article in the #centerme &lt;div&gt;.
		This is a dummy article in the #centerme &lt;div&gt;.</p>
</div>
</body>
</html>

Kingherc · #3 06-Jul-2003, 06:25

Interesting code! I don't know xhtml but it seems it really works! Thx 4 the response but at last I solved the problem with javascript. It would seem that i did some very foolish things. lol, 4 any1 interested, here what i used:

We have a <div id="bla" style="position:absolute; top:50%; left:50%; width:134; height:265">bla bla bluh</div>
Then the edge of the div is at the center of the screen but the width and the height is the problem.
So, in javascript:

var bbla = document.getElementById("bla");
bbla.style.left = "50%"
bbla.style.top = "50%"
var bblaleft = bbla.offsetLeft
bbla.style.left = bblaleft - bbla.offsetWidth/2
var bblatop = bbla.offsetTop
bbla.style.top = bblatop - bbla.offsetHeight/2

And it also works both 4 Internet and Explorer and Netscape!
:-D
What I did wrong was that i used the var bbla = .... before creating the <div> and it resulted in 'undefined', lol , dummy.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Rate This Thread
Rate This Thread:

HELP!: find window width? Center a <div>?

Centering a floating div with CSS

Solved!