Always centered page content

How to center a pages content in the browser

[bj199347]

Hi all,

I need to be able to center a page's content to be in the center of the screen at all times no matter what resolution or browser.

The sites are brochure style with no scrolling. Any advice would be most appreciated. Thanks.

P.S. The size of the page content will need to be just under 800 x 600 px.

Thanks again.

Martin

[edited by: tedster at 11:50 am (utc) on Feb. 17, 2003]

[Sinner_G]

One solution would be to have your content in a table and an align=center, but I'm sure there is a better (nicer) solution (maybe CSS?).

[BlobFisk]

You could use a containing div with margins set to auto.

eg: <div style="margin:auto; width:750px">

This should ensure that this container layer is always centred on the page, regardless of the available width of the browser window.

[tedster]

Unfortunately "should" is the operative word here. Explorer (even version 6) does not render that CSS properly - the div ends up on the left hand side of window. Maybe version 7, eh?

No problem with recent Mozilla/Phoenix/Netscape or Opera, however.

I must admit that this one frutrates me so much that I still resort to the deprecated <center> tag - or table based layout.

[BlobFisk]

That's very true Tedster. You could use a text-align:center on the body in your CSS, but you then have to define a text-align:left on all paragraphs etc. on the page, and that can get cumbersome.

I tend to do it the long way and use some JavaScript to get the available width and then calculate the left point of the layer. Not ideal I know, but it works!

Maybe version 7, eh?

My fingers are firmly crossed for this and are staying firmly that way! ;)

[rpking]

How about simply:

<div align="center">

?

[tedster]

The big issue for me is to write code that looks "forward" - that adheres to standards and won't require repair work a year or two down the line.

The problem here is that align is a deprecated attribute, and the <center> tag is deprecated as well. But their replacements aren't well supported right now.

Here's a thread about deprecated elements in HTML 4 [webmasterworld.com]. If you haven't seen this before, it can be a real eye opener.

Now, to be sure, "deprecated" doesn't mean it won't work -- these elements are too widespread on the web to just get dropped without legacy support. But this is the shot across the bow - the change has begun and some day these elements will be retired to the old HTML home, never to work again.

[tedster]

#2 is VERY clever. I wonder if the crew over in the CSS forum knows about this one.

position:absolute;
left:50%;
width:450px;
margin-left:-225px;
padding:0px;

[BjarneDM]

as to the two methods: try making your window narrower than the width of your contents :-)

1) ought then to give you contents flush against the left border of the window, a scrollbar and contents that has flown off the right edge.
2) content flows 50/50 off both sides of the window with now scrollbar for content scrolled out of the window to the left.

unfortunately, for method #1 there's bug in Mozilla so it does both things: flows content 25/75 out of the window without scrolling to the left.
[bugzilla.mozilla.org...]

[biocell]

what i do is make a table and make it W:100% H:100% and make a new table inside of it and align it center that way it always is centered no mater what