HTML Forum

**scorch** · 10-04-2005, 08:08 PM

I am having problems centering my webpage.

When I center my page, all the divs are not inside the container.

What I did was to make a div that was a contained, and then put all other divs inside that one, but the centering does not happen.

Anyone know how I can fix this

thanks

http://www.egressglo.com/test2/index.html

**praveen** · 10-04-2005, 08:32 PM

specify a width for the main div (container) and then set the margin left and right to auto.

and it should be centered on ur browser.

**scorch** · 10-05-2005, 03:06 PM

I managed to center the main container, but all other divs are static and stay in place. So when I resize the screen they leave the container.

Are there any files or webpages I can download so I can see how it has been done? I have done it before, but for some reason I cannot get it now.

**funkdaddu** · 10-05-2005, 03:17 PM

The DIVs must be inside the container centered div and absolute positioned to move with it:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
		<title>Untitled Page</title>
		<style type="text/css" media="screen"><!--
#Container  {
	background-color: #ddd;
	visibility: visible;
	margin-right: auto;
	margin-left: auto;
	padding-top: 100px;
	position: relative;
	width: 700px
	}

#AbsoluteBox  {
	color: #fff;
	background-color: #bf0000;
	visibility: visible;
	position: absolute;
	top: 5px;
	left: 25px;
	width: 100px;
	height: 100px
	}


--></style>
	</head>

	<body bgcolor="#ffffff">
		<div id="Container">
			<div id="AbsoluteBox">
				Box
			</div>
			<p>Knight Rider, a shadowy fight into the dangerous world of a man who does not exist. Michael Knight, a young loner on a crusade to champion the cause of the innocent, the helpless in a world of criminals who operate above the law.</p>
			<p>Ulysses, Ulysses - Soaring through all the galaxies. In search of Earth, flying in to the night. Ulysses, Ulysses - Fighting evil and tyranny, with all his power, and with all of his might. Ulysses - no-one else can do the things you do. Ulysses - like a bolt of thunder from the blue. Ulysses - always fighting all the evil forces bringing peace and justice to all.</p>
			<p>Just the good ol' boys, never meanin' no harm. Beats all you've ever saw, been in trouble with the law since the day they was born. Straight'nin' the curve, flat'nin' the hills. Someday the mountain might get 'em, but the law never will. Makin' their way, the only way they know how, that's just a little bit more than the law will allow. Just good ol' boys, wouldn't change if they could, fightin' the system like a true modern day Robin Hood.</p>
		</div>
		<p></p>
	</body>

</html>

**Tudor.b** · 10-05-2005, 03:57 PM

With "absolute" positioning, the divs will always stay in place. That's what absolute does. In your case, use "relative".

**scorch** · 10-06-2005, 01:13 AM

THanks for the help guys.

Ive gotten it sort of work with internet explorer, but when im mozilla firefox the container divs stays centered, but all the other divs move.

check it out

http://www.egressglo.com/test2/works.htm

Not sure why im having so many problems, im using dreamweaver. When I move the divs around, they dont match what I see on the browser. So I have to move them to some extreme corners in order to put them where they should be.

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!