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!

Link to comment
Share on other sites

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....
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • 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.