1024 by 768 left aligns at high resolution

**Tone** · 08-12-2008, 03:12 AM

Hi, I realise that this is probably a common newb question, but I haven't found the exact details of what I'm after from doing a search.

I have a site optimized for 1024 by 768 which when tested in a browser set at higher resolutions such as 1280 by 1024, aligns hard left in the browser leaving a big whitespace of about 260 pixels on the right.
I'm sure this is a HTML body tag issue? Is there some setting where left and right alignments are set "auto" and so always aligns the site in the centre?

Thanks in advance.

**wysiwyg** · 08-12-2008, 05:03 AM

Yes, you can center the content. However, it's better practice to design for all resolutions by creating a layout that expands to fill available space.

To center an element within its container you set its horizontal margins to 'auto'.

HTML Code:

div { margin: 0 auto; }

To support out-dated, non-standards-compliant browsers you must assign the body element 'text-align: center'.

**Tone** · 08-12-2008, 07:50 PM

Originally Posted by wysiwyg

Yes, you can center the content. However, it's better practice to design for all resolutions by creating a layout that expands to fill available space.

To center an element within its container you set its horizontal margins to 'auto'.

HTML Code:

div { margin: 0 auto; }

To support out-dated, non-standards-compliant browsers you must assign the body element 'text-align: center'.

Thanks for your help. Forgive me for being a complete dumbass but are you talking about the whole site being formatted using CSS? ie: creating containers for each section and then using the div tag to format each section? Is it possible to centre the entire page?

Most of my site is html, tables (yeah I know, but i'm a newb and I'm just getting my head around CSS). I have inserted CSS styles for certain things within the html head tag ie:

<head>
<style type="text/css">
body {
margin-left: 0 auto;
margin-right: 0 auto;
}
</style>
</head>

I've tried vaiations including
body {
margin 0 auto;
}

I've tried using your code
div { margin: 0 auto; }
But I don't know where within the HTML code to insert it? Is this more for seperate containers, not an entire page???
I thought that setting the body margins within the <style> tags would work?

**Bob Barr** · 08-12-2008, 10:45 PM

I've tried vaiations including
body {
margin 0 auto;
}

This is the correct one to use but there's a missing colon (':') at the end of the word 'margin'.

**felgall** · 08-12-2008, 10:51 PM

You also need to specify a width with the margin otherwise it doesn't know how wide the object to be centred is.

**Tone** · 08-12-2008, 11:27 PM

Guys,
Thanks very much for your help.

Originally Posted by felgall

You also need to specify a width with the margin otherwise it doesn't know how wide the object to be centred is.

You mean like this:

<style type="text/css">
body {
margin:0 auto;width:1024px;
}
</style>

.......????????????

**wysiwyg** · 08-13-2008, 05:39 AM

Well I suppose you could style the body tag directly, but it might cause issues in some browsers.

You should have a container element nested inside your body tag on your page that holds the content that you want centered. This can be any block-level element, a div for example.

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <style type="text/css">
   #example {
    width: 500px;
    margin: 0 auto;
   }
  </style>
 </head>
 <body>
  <div id="example">
   stuff goes here
  </div>
 </body>
</html>

What you're doing is taking the div and making its left and right margins (the space around your element) automatically adjust to fill the remaining space in its parent element.

By default internet explorer has trouble with this, because it uses a retarded quirks mode, so it's necessary to provide a specific doctype that supports what you need to do.

I think the only browser that requires you to use "text-align: center" is IE5 and I kind of doubt anyone with a higher resolution than that would still be using it, so I won't bother adding that hack.

**Early Out** · 08-13-2008, 05:49 AM

Originally Posted by wysiwyg

I think the only browser that requires you to use "text-align: center" is IE5 and I kind of doubt anyone with a higher resolution than that would still be using it, so I won't bother adding that hack.

FWIW, the stats on my own website show that, out of over 45,000 visitors, there were 6, count 'em, 6, who were using IE5, so hacks for IE5 can probably be safely ignored from now on.

Still a fair chunk of IE6 users, alas.

**Tone** · 08-16-2008, 08:22 PM

Originally Posted by wysiwyg

Well I suppose you could style the body tag directly, but it might cause issues in some browsers.

You should have a container element nested inside your body tag on your page that holds the content that you want centered. This can be any block-level element, a div for example.

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <style type="text/css">
   #example {
    width: 500px;
    margin: 0 auto;
   }
  </style>
 </head>
 <body>
  <div id="example">
   stuff goes here
  </div>
 </body>
</html>

What you're doing is taking the div and making its left and right margins (the space around your element) automatically adjust to fill the remaining space in its parent element.

By default internet explorer has trouble with this, because it uses a retarded quirks mode, so it's necessary to provide a specific doctype that supports what you need to do.

I think the only browser that requires you to use "text-align: center" is IE5 and I kind of doubt anyone with a higher resolution than that would still be using it, so I won't bother adding that hack.

Thanks so much. This has helped me out.

Thread: 1024 by 768 left aligns at high resolution

Thread Tools

Display

1024 by 768 left aligns at high resolution

Posting Permissions