Positioning fixed width content in the center of the page

Hello everyone,

Hopefully this email is on topic for this list. I've 
recently been spending time learning how to build 
pages in a standards compliant manner, as opposed to 
the traditional table based layouts and I've run into 
a problem. Looking into it further, it's highlighted 
a number of things which I would like to outline here 
(sorry it's so long).

I've been attempting to create a fixed width page, 
and then centering that content in the browser 
window. I know that it is much better to build a 
more "fluid", "stretchable" page, using relative 
widths, but that isn't always possible. The 
traditional method would have relied more upon the 
<CENTER>, or <TABLE ALIGN="center> elements, but both 
these are now deprecated in favour of style sheets. 
So, the best solution I've come up with is to 
surround all my page content in two DIVs: <DIV 
ALIGN="center"><DIV ID="content">PAGE 
CONTENT</DIV></DIV> element, and then use CSS to set 
the width (ie. #content {width: 600px;}). This has 
not worked entirely though, I've found the following 
problems, each different, but interesting:

1. Re: Netscape 6/Mac: this method works, but when 
you resize the browser window to less than 600px, the 
content is "centered" such that part of it now lies 
to the left of the browser window. Since you are 
unable to scroll left, the content is completely 
inaccessible. Though this might be 
perfectly "centered", it definitely goes against the 
idea of content accessibility, even for those of us 
who don't have a disability! I don't know if this is 
a browser bug, or a "bug" in the HTML 4.01/CSS-1 
specifications.

2. Re: IE 5.0/Mac: the method doesn't (really) work. 
The content remains aligned to the left of the page. 
I can make it work by removing the Strict HTML 4.01 
DOCTYPE declaration (even the Transitional doesn't 
work), but this doesn't make much sense to me. 
Luckily though, when I do remove the declaration, the 
page does render correctly, and the content doesn't 
become unaccessible if you resize the browser window 
smaller than the content. It simply aligns left, and 
gives you a scroll bar to access the overflow content.

3. Re: HTML 4.01 Specification: I started to read the 
spec more in depth, to see if I could learn anything. 
It clearly states, "The CENTER element is exactly 
equivalent to specifying the DIV element with the 
align attribute set to "center". The CENTER element 
is deprecated." So I then looked into the align 
attribute itself, and found that it is also 
deprecated for every use except the horizontal 
alignment of table cell contents. Specifically, it is 
deprecated for the DIV element. So, is the spec 
asking us to replace a deprecated element (CENTER) 
with a deprecated attribute (DIV ALIGN="center")? 
Furthermore, I can't even find the ALIGN attribute in 
the Strict DTD itself, only in the Transitional DTD. 
So why then will Netscape 6/Mac render it with the 
Strict DTD Doctype declaration? Is that a bug? 

4. Re: the concept in general: It makes sense to me 
that the attribute be deprecated from HTML 4.01, in 
keeping with the idea that style should be separated 
from content. So, it then should have a counterpart 
in CSS-1. Maybe I'm missing something though, but I 
can't find this counterpart in CSS-1. Sure, it's 
there to format text, but what about formatting a 
block-level element of any kind to the center of the 
available space?

Let me know what you think. It's entirely possible 
that I've gotten myself so worked up about this that 
there is something really simple that I'm missing, 
but I obviously haven't found that yet! Thanks for 
your help.

Cameron Booth
cameron@cdbdesign.net

ps. Another strange, unrelated thing I encountered. 
Try placing an image in a fixed width DIV, but 
setting the IMG WIDTH to wider than the width of the 
DIV, and then viewing it in N6/Mac, or IE5/Mac. I 
would have assumed the image would force the DIV to 
stretch wider, but it doesn't, instead, the 
image "falls" out. Shouldn't a sibling element be 
completely contained in the parent block level 
element, or is this not the case with "replaced" 
elements like IMG?

Received on Thursday, 19 April 2001 00:35:41 UTC