Centering a web page for all resolutions

Forum Moderators: not2easy

Message Too Old, No Replies

Centering a web page for all resolutions

Wrapper?

BigAL1983

4:25 pm on Nov 5, 2008 (gmt 0)

Hi guys

I have been searching how to center my web page on all screen types and res

however im not having much luck

So far have tried the 0 auto margin and {center} before body tag

If anyone could advise i would be very happy

the web site is <snip>

Alex

[edited by: swa66 at 6:37 pm (utc) on Nov. 5, 2008]
[edit reason] No URLs please. Please read forum charter. [/edit]

mercedes

4:45 pm on Nov 5, 2008 (gmt 0)

1. css for body tag:
text-align: center;

2. css for site block(first element that wraps all content):
margin: 0 auto;
text-align: left;

In first section "text-align: center;", code centers everything including sub elements.(for ie 6 and older)

In second section, first line, code centers site block. This is for modern browsers.(which do not support 1st section centering method)

In second section, second line, code aligns everything to left as normal.(remember 1st section, just for correcting purpose)

i prepared test page for you:

<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
text-align: center;
}
#site-block {
/* visual settings */
width: 600px;
background-color: #EEEEEE;
/* centering stuff */
margin: 0 auto;
/* correcting stuff, remember body tag's text-align properity */
text-align: left;
}
-->
</style>
</head>
<body>
<div id="site-block">
<p>Content for id "site-block" Goes Here</p>
<p>content</p>
<p>content</p>
<p>content</p>
</div>
</body>
</html>

Mercedes

swa66

7:12 pm on Nov 5, 2008 (gmt 0)

While the code from Mercedes works and is widely used, take care that it actually contains a few hacks to make IE6 do the right thing:
E.g.:

the wrapper div is only needed for IE6;
the text-align: is also only needed for IE6

If you want to see how simple it is for standards compliant browsers, take a look here: [webmasterworld.com...]

BTW: I would suggest to add a proper doctype to the code.

alt131

1:47 pm on Nov 7, 2008 (gmt 0)

Hi BigAL1983,

So far have tried the 0 auto margin and {center} before body tag

If by center you mean <center>, then the reason it doesn't/shouldn't work is because it should only be placed after <body>, so will be ignored. <center> is also deprecated, so best practise is to avoid it anyway.

The wrapper example by mercedes is one way to achieve centering, but if you do not have to support versions of ie before 6 (so are supporting 6 and above), then a wrapper is not required.

For ff2&3, winSafari, Opera9, Netscape8 (if anyone cares) and ie6&7, it is possible to centre a fixed width page by just applying a

width

and

margin:0 auto

to the

body