homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Simple CSS question
centering a page

 2:07 am on Aug 18, 2001 (gmt 0)

How can I center an entire page and keep it's formatting with CSS? My idea was to nest everything in a <div> element with some sort of centering property. Maybe I just didn't look hard enough but I couldn't find one. Is there a better way?



 7:09 am on Aug 18, 2001 (gmt 0)

This apparently simple thing has confounded me also, Jake. It sounds like your approach ought to work — use text-align:center to center a nested div, and then declare text-align:left for that nested div, in order to override the centering of elements that would be inherited from the outer div.

But it only works in Explorer, and not even Opera.


#container {width:100%;text-align:center}
#pageitself {width:580px;text-align:left}


<div id="container">
<div id="pageitself">This is the page we want to be centered.</div>


The old, deprecated <CENTER> tag was simple and elegant for this kind of functioning. In Opera and Netscape 6 th e <center> tag will still center a div on the page, even though it's now deprecated. But not in Netscape 4.x! No method I can find will center an entire div in Netscape 4.x.

My guess is that tables are still required to get this centering effect with the current browser situation. I'd sure love to hear differently.


 11:32 am on Aug 18, 2001 (gmt 0)

Here's one method I used to use when I wanted the page to be 750 pixels wide, without putting the whole lot in a table. Basically, it uses JavaScript to measure the window's inner width, and then sets CSS margins accordingly.

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"><!--
if (window.innerWidth) {
var maxwid = 750
var wid = (window.innerWidth - 32)
var marg = (((wid-maxwid)/2)-(((wid-maxwid)%2)/2));
if (marg>0) {
document.write('<STYLE TYPE="text/css">\n');
document.write('.main \{\n');
document.write('margin-left: ');
document.write('px;\nmargin-right: ');
// --></SCRIPT>

It has it's limitations, namely the browser must support JS with the innerWidth object as well have support for margin-left and margin-right CSS. And the margins remain when the window is resized. But maybe this will give someone some ideas and inspire them to make an improved version of it.


 9:21 pm on Aug 18, 2001 (gmt 0)

The horrible thing is that <center> is depreciated in HTML 4. Replacing it does seem overly tedious, especially with respect to browser compatibility.

One thing that should work for every CSS compliant browser:

margin-left: auto;
margin-right: auto;
width: 80%;

But it seems only the Opera designers fully read the CSS spec ;)

In IE, you'll have to do something like:

<div style='text-align: center; width: 80%;'>
<div style='text-align: left;'>
<!-- text here is left justified and centered with 10% margins each side -->

Hope that helps.


 3:40 pm on Aug 23, 2001 (gmt 0)

Why not use tables (or am I missing the point) - this can even be used to centre vertically and works in all browsers I've tested. Be sure to set your page margins to zero for vertical centering

<table width="100%" height="100%">
<td align="center" valign="middle">

Your page goes in another table here....



 4:43 pm on Aug 23, 2001 (gmt 0)

yep...you are missing part of the point...the great thing about css is that you can get rid of a lot of the clutter from your pages...making them more SE friendly, more accessible for text to speech browsers etc...layout by tables is exactly the sort of stuff I went over to css to get rid of

there are also a number of rendering problems associated with pages entirely created within a table


 4:56 pm on Aug 23, 2001 (gmt 0)

a number of rendering problems associated with pages entirely created within a table

But centering your content wasn't one of them... ;) CSS/browser compatibility has a few glaring holes, and the incredibly poor support for centering anything is one of them.


 10:35 pm on Aug 23, 2001 (gmt 0)

I was reading the specs again, and they keep mentionning that div tags are ideal to replace tedious table based formatting... it's a nice theory, but div's don't really do well with explicit positioning!

Try getting a div box in the top left (say a logo), and another div filling the rest of the top right. Tables do that nicely, but this is a whole new ball game!

Floating div's bother me too... in most browsers, the floating divs can overflow their parent's boundaries. Anyway, i'm rambling now.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved