Page Style, - How Do I Get The Content Centred?

  thegreypanther 10:11 28 Jul 2007
Locked

I am trying to reset the Style Sheet for a website that I run, such that the content of the page is centred on the screen in a block 800 px wide.
There does not appear to be a BODY attribute that can be used in Style Sheets to enable me to do this. The alternative is to place the content with a centred table 800 px wide.
Is there a neat way of centering the content of a web page within an 800 px block, or is use of a table the only way forward?
All suggestions gratefully received.

  gibbs1984 12:36 29 Jul 2007

I use a container div with all the rest of the html to go in with the following CSS:

#container
{
text-align: justify;
width: 796px;
margin-left: auto;
margin-right: auto;
padding-top: 0px;
min-height: 750px;
}

You can set the width to 800px.

  rachwelian 21:03 29 Jul 2007

No no no, don't use tables for your layout!

If you want your content 800px wide and in the middle of the screen, you'll need...

body {
text-align:center; /* centres everything in IE */
}

#id_of_container_div {
width:800px;
margin:0 auto; /* centres everything in non-IE */
text-align:left; /* aligns the text back to the left */
}

You do NOT need to use tables to centre your layout.

  thegreypanther 23:29 29 Jul 2007

Many thanks gibbs1984 and rachwelian.
I must be doing something stupid, because even when I try your coding I find that the text remains firmly located on the left of the screen, - in a column 800px wide, but still to the left of the screen.

Why is the use of tables for centering text such a big NO-NO?
It obviously works, and is fairly easy to apply. BUt the strength of rachwelian's comment rather indicates that doing this is very poor practice.

  thegreypanther 11:17 30 Jul 2007

Have finally got the result as shown by gibbs 1984 and rachwelian.
In case others are following this thread, the trick is to place the #container {...} in your style sheet, and then on the HTML page enclose the content between <div id="container"></div>.
Yes, it really IS as simple as that!

I am still curious as to why tables are a NO-NO for placing content on a page. Is it just that they are that bit more tricky to use than the straightforward <div></div>?

  gibbs1984 13:09 30 Jul 2007

I don't know a great deal but what I've read is that the browser won't show any of the content of a table until it is all downloaded from the server. Where as if it is placed in a div then the content is displayed as and when it is downloaded.

Tables are for tables, they are meant for showing content in a table rather than the whole website, they are messy in my opinion and divs are clean and easy to use.

It's just bad practise to use tables to display the whole content of a webpage.

I might get proven wrong but that's what I've read.

Steve

  rachwelian 16:59 31 Jul 2007

Tables destroy your sites for blind people using a screen reader.

Tables should only be used for TABULAR data, not for your layout.

These days everyone should be trying to make their website make *sense*. It's not just about what the visitor sees, it's about what the coder puts inside their site.

Tables have their own sets of rules and yes, they're generally more complicated than divs.

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

Elsewhere on IDG sites

Alienware 17 R4 2017 review

These brilliant Lego posters show just what children's imaginations are capable of

Mac power user tips and hidden tricks

Comment réinitialiser votre PC, ordinateur portable ou tablette Windows ?