How to keep a webpage in the centre???

Associate
Joined
28 Dec 2002
Posts
2,400
Location
Northern Ireland
As title really guys, i checked my website on a different computer today and the whole thing was in the top left hand corner.

How do i keep it in the middle no matter who looks at it or the resolution of there screen
 
depends on your coding really, if its a simple html and your not worried about the w3c stuff then you could probably just do

Code:
<div align="center">

[i]CONTENT[/i]

</div>
 
Code:
<body>
<div id="Site">
 
* ALL CONTENT *

</div>
</body>

and then

Code:
#Site {width:780px;margin:0 auto}

you can of course change the width from 780px, but you always need to define a width with this method.
 
cheers guys,
another quick on, where it says margin in the above code, is that how i get a margin round the whole page?

if not how do i do this?
 
If this is my code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Home</title>
</head>
<body>
Hello this is a test
</body>
</html>

Where do i place this:

Boov said:
Code:
<body>
<div id="Site">
 
* ALL CONTENT *

</div>
</body>

and then

Code:
#Site {width:780px;margin:0 auto}

you can of course change the width from 780px, but you always need to define a width with this method.

ace
 
Well thats using the one i provided

Code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Home</title>
</head>
<body>
<div align="center">
Hello this is a test
</div>
</body>
</html>
 
Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Home</title>

    <link rel="stylesheet" type="text/css" href="default.css" />

</head>
<body>

    <div id="Site">
    Hello this is a test
    </div>

</body>
</html>

you will then need to make a .css document, by simply making a new .txt document and changing the file extension to .css. name this file "default.css"

open this document and then add all your css code, such as

Code:
body {margin:40px}
#Site {width:780px;margin:0 auto}
 
Internet explorer <7 does not recognise margin: auto;

You will have to use a mini hack by adding

Code:
body
{
     text-align: center;
}

To centre everything in IE aswell.

You will have to explicitly re align text to left justify as this will centre everything.
 
Back
Top Bottom