Main body of page is off centre

  Ade_1 17:02 07 Nov 2006

Hi, I have been working on my site for a number of weeks now however I have only just came to discover that in a higher resolution (1152x864) the main body of the page is off centre. I have tried changing some things in my stylesheet but it doesnt appear to be working.

The URL is click here

All help is greatly appriciated.

Thanks in advance


  acsmanhtml12 19:27 07 Nov 2006

Failed validation - One error. Easy to fix - I think.
Anyway. Do it like I do.
put I div called main around all the other divs.
in your css
width: 800px;
margin-left: auto;
margin-right: auto;
text-align: center;

I think thats it. Any problems I'll send you it from my stylesheet

  Ade_1 19:44 07 Nov 2006

Thanks for the reply.

I do already have a div similar to that named container.

#container {
width: 800px;
border: 1px solid #FFFFFF;
position: absolute;
background-color: #336699;
font-size: 12px;


  acsmanhtml12 19:52 07 Nov 2006

It will only move the content 100px to the left surely. As I understood your question you wanted it completely centre. Use #container, and try it with my styling. It may work. Ill have a look through my stylesheet to see if I missed anything

  acsmanhtml12 19:54 07 Nov 2006

Yeap my way works and you could chuck in a backgroudn color. It will not background the behind of the centre on the centred div container. the body will be left with your default body color.

  PurplePenny 20:12 07 Nov 2006

The reason that it is off centre is that you have used fixed widths: they add up to 900px so on a 1028 wide screen there are 128 px remaining on the right: thus it looks just about centred. On a 1152 screen there are 252 pixels remaining onthe right so it looks off centre. On an 800 screen you will end up with horizontal scrolling.

If you use flexible widths you won't run into that problem. Try 10% for the left positioning then 80% for the width.

  PurplePenny 20:18 07 Nov 2006

You've used a heading tag for formatting: an h4 for the footer ("This website designed...").

Headings should never be used for formatting only to mark-up genuine headings. An h4 can only be a sub-heading of an h3 but you don't have an h3. The reason for this is that users of screen readers and other assistive technologies use the heading tags to navigate around a page.

  Ade_1 20:21 07 Nov 2006

Thanks for your help acsmanhtml12, however as you said the background colours wernt working and I was unable to rectify this problem.

PurplePenny, you method is working great, however the only problem I am having is getting the correct width for the content area.

Thanks for your help


  Ade_1 20:44 07 Nov 2006

I actually have it working on IE however on FF the container doesnt appear to be carrying down the page as the content just jumps over the edge of the container and continues down the page.

I used acsmanhtml12's idea but changed my background colour so that it looks correct.


  acsmanhtml12 07:25 08 Nov 2006

It looks the same on your URL. I'm viewing it @ 1440 * 900 and it really is off centre. My way, you only get 800px of content and the rest is just the background color you described. Again you could be sneaky and put divs outside the container and float them to contain you bg images/colors etc. if you had the time and paitence

  acsmanhtml12 07:26 08 Nov 2006

and I mean it in the greatest respect

This thread is now locked and can not be replied to.

Elsewhere on IDG sites

The Evil Within 2 review-in-progress

Photoshop CC 2018 released with new Curvature Pen and better brush tools

Camera tips to take better iPhone photos

Les meilleures applications de covoiturage 2017