Jump to content

How to center a page template into the middle of the browser?


Solarpitch

Recommended Posts

Hey Guys,

I am currently desiging the template for my site. I am having a problem trying to center the page in the center of the screen.

http://www.gamespot.com/    --> has a perfect example of what I am talking about.

I am bascially trying to position the page in the center of the screen and have the page right up against the top of the screen, as in the above example.

I would just like a quick idea/example of how this is achieved if possible!

Cheers!

Fenway...

Do you even NOT use tables?

Tables are evil!!!!

To centre a page 'properly' using divs for layout - as god intended - simply specify a width of 100% to your html and then use margin: auto; in your css

so basic html...

[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="/global/style/screen.css" media="screen" />
<title>title</title>

</head>

<body>
<div id="header"></div>
<div id="wrapper">
<div id="nav"></div>
<div id="info"></div>
<div id="content"></div>
</div>
<div id="footer"></div>
</body>
</html>[/code]

and css
[code]
html {width: 100%;}

body {margin: 10px auto; width 765px;}

.....

[/code]

obviously thats for a fixed width site, so alter as needed but that will give you a basic centered page....

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.