How do I center a table horizontally in XHTML without using deprecated <center></center> (which I'm using now) and without a script? Either the external *.css sheet doesn't do it or I haven't found the right terminology. I want the table or middle column to be 600 pixels wide, with equal numbers of pixels to the left and right of it regardless of the user's screen resolution or browser size or whether I have content in any cell or column or no content or what kind.

I tried specifying the pixels for the middle column and not specifying for the other two, but then the left column was too narrow or disappeared entirely if empty, pulling the middle column too far left. I tried width="600px" in the center and width="50%-300px" in the two flanking columns, but that made the two flanks each take nearly 50% and the middle column just narrow enough to fit the text; not a good layout, and besides the form of 50%-300px isn't a documented feature, to my knowledge. Text alignment isn't a problem.

What attribute should I use? Or what method? Thanks.

-- Nick

Cheers to using XHTML! Have I got a thread for you, mate!
http://www.lissaexplains.com/forum/showthread.php?t=53640

The "50%-300px" shouldn't actually do anything (as useful as the syntax might be at times), so I'm surprised you were able to use it at all. With the methods in the above-linked thread, you could try absolutely positioning your columns from the left and right, respectively, to include them as well. You'll probably want to replace some of the values in the above thread's example, which use pixels as a unit, with percentage values to keep your layout liquid.

Mixed results:

I didn't get the effect with "margin: auto;" of producing equal margins left and right. My XHTML book says "auto" uses the browser's default. In IE5 that's almost zero unless there's content on the left and even then everything moves leftward, and I want to be compatible with older browsers. Specifying an overall width doesn't let me fit different users' window widths. I'm using invisible tables to keep line lengths comfortable for reading, so I don't want the cell width to be a percentage of the user's window width, either.

On the other hand, the second solution worked better, and I could drop the vertical alignment stuff, which I don't need.

What worked in a CSS:

{ width: 600px; position: absolute; left: 50%; margin-left: -300px }

This worked with id= and class= and with the containing element (I tried div) without id= or class=. Testing was in IE5, max and resized, on a Win98SE 1024x768 platform, with fixed widths varied and fonts changed via CSS to be sure effect was seen. I have not tested in other browsers, but I intend to. I have not tested with other elements.

I got equal success with Transitional, Strict, and Frameset DTDs, all public. It even worked when I mistyped the doctype's Strict absolute URL, omitting the 5th slash.

While I got the most important effect, centering a 1-cell-per-row table, I still can't use the flanks very well (the flanks in a 3-cell-per-row table). That is, flank content changes the center cell width. That eliminates flank content being optional on a space-available basis; either I commit to having flank content for all users and adjust numbers accordingly or I keep the flanks empty for all users and use the above numbers or similar. I suppose the solution for that is JavaScripting to learn each user's window width and serve content accordingly; or do you know a nonscript method for that subproblem?

Thanks, J to the izzosh, for putting me on the right track. (By the way, I think "50%-300px" got treated as just 50%. I'm not recommending that syntax within XHTML; I just wanted to try something, and it duly failed.)

-- Nick

If the auto margins didn't work as described, then IE5 is likely the culprit. IE6 will center an element with a set width as long as a doctype is used to prevent it from reverting to quirks mode. Really, you should be testing in a browser like Firefox. IE6 is terrible, 5 is worse. Also, tables really shouldn't be used for layouts, only the display of tabular data.

As for your columns, you could try something like this:
http://jfweb.fastmail.fm/center/center2.htm

Oops: I didn't test enough. What I said worked apparently only worked for a single-<div> page. Multiple <div>s overlapped vertically. Plus, some positioning elements may not work in older browsers. I'm back to deprecated <center> tags and experimenting to find a fix. Now that I have the source code for a possibility -- thank you, J to the izzosh -- I'll work on it. If it works in XHTML 1.0, I'm interested; if it requires 1.1, I'll probably keep searching/trying because I understand many browsers don't support 1.1 very well.

Tables for layout were a bit controversial, especially among folks who thought HTML shouldn't be used for controlling looks but for organizing information, but generally invisible tables work and are harmless, to my knowledge.

I had a doctype declaration.

IE deserves a public flogging and to have molasses and cod liver oil poured on its head, and I use Firefox and Opera a lot, but IE6 is still the dominant browser out in the world, so I test mainly in IE. I test in version 5 because my Win9x platforms want it and I think won't run IE6, and I'm not planning to upgrade from perfectly acceptable OSes. If my Web pages work on my Win95 IE5.5 640x480 32MB platform and my Win98SE IE5 1024x768 machine, they should work on almost everyone else's. And I spot-check in Firefox's and Opera's latest versions.

Thanx again.

-- Nick

Thank you very much for the layout.

Declaring XHTML 1.1, it worked in IE5.5, Firefox, and Opera (& failed in IE5, as you'd likely have predicted). When the browser window is smaller, though, it truncates the top: Firefox; Opera at 780x352.

I downgraded to XHTML 1.0 & played in IE5 for broader browser compatibility and maybe that limits the design's utility, but it doesn't seem likely to flex enough for different window sizes. Perhaps I could set just the left and right boxes and let text flow between them, but then I can't specify the width of the space between the boxes regardless of the user's browser width.

I may wind up hoping that <center> will continue to be supported in major browsers for some years, but bad coding in XHTML is supposed to force complete failure of a page, so that hope is a bad idea. My main XHTML book says <center> is deprecated in favor of <div align="center"> and that that is deprecated in favor of style sheets. But "align:center" or "position: center" in an external stylesheet isn't doing anything ("position: center" did nothing whether applied to <div> or <table>), and text-align is only for text-like stuff. After trying to find the answer in that book, another good book on CSS, & in W3C's CSS 1 & 2.1 docs, I wonder what we're supposed to use in CSS instead of <div align="center">. Any idea?

Or maybe I should give up on centering altogether and make a 1-column design with a fixed width of 600px for the definite content, leaving 20px to the left empty somehow so it looks a bit nicer, and putting optional content to the right of the 600px, the optional stuff maybe being squeezed down and out of sight in a 640x480 screen as long as the definite content shows like it should. At least that would keep text line lengths from getting too long on larger screens.

Thank you, again.

-- Nick

Yeah, the truncation at the top is a byproduct of the negative margin. I wouldn't worry much about resolutions under 800x600, though. People using IE4 at a resolution of 640x480 really can't expect everything to work perfectly. You could also ditch the vertical centering and negative margin to get rid of the clipping.

Using the XHTML 1.0 Strict DTD in favour of XHTML 1.1 serves little purpose because the differences between them are negligible (http://www.w3.org/TR/xhtml11/changes.html#a_changes).

As for controlling the space between them, that gets a bit touchy when borders, padding, and percentages are involved. Because the actual width of an element box, according to the CSS box model (http://www.w3.org/TR/CSS21/box.html), is content + borders + padding + margin, where content width is specified by the width property, giving two elements a width of 20% and 80% would be a total width of 100% + borders, etc., so things start to overflow. Hopefully, they will be adding expression values (http://www.w3.org/TR/css3-box/#the-box-width) to the CSS 3 spec ( i.e., "width:80%-2px") which would make me the happiest CSS author on the face of this planet.

"Center" is not a valid value for the position property (http://www.w3schools.com/css/pr_class_position.asp) and "align" isn't a CSS property at all. If those came from your book, you might want to think about getting a better book.

I wonder what we're supposed to use in CSS instead of <div align="center">. Any idea?
Yes, some:
http://www.lissaexplains.com/forum/showthread.php?t=59782

Quote:
* * * * *
"Center" is not a valid value for the position property and "align" isn't a CSS property at all. If those came from your book, you might want to think about getting a better book.
* * * * *

I may've gotten those in particular by poking around topics and sites and being willing to try more or less whatever.

On accommodating old browsers, a philosophy: For a new site I'm planning as a revenue center, I think the audience will support an expectation that viewers have newer browsers. For them, generally expecting they run one of the last 2-3 major (re)iterations of Win or comparable non-Win OS versions is ok, and I'll design accordingly. But for one site I already have, a nonrevenue site, for which the intended audience includes low-income users with whatever ways they can find for connecting to the Internet (old OSes which fit smaller hard drives and cheaper computers generally come with old browsers, and it recently came out that many school districts still license Win98, paying annual license fees), I'd rather compromise in favor of a tolerable design that welcomes old-browser and new-browser users well enough. As an example of a site I haven't tested in pre-IE6 browsers lately, I assume Google's home page still works in them, at least for basic Web search. And Yahoo keeps its old email home page for non-script-enabled users; the user is redirected there automatically if script rejection is detected by Yahoo. I understand text-only Lynx is still fairly widely used, and I gather it's still limited to HTML 3.2; designing for Lynx is still being recommended, although I don't support it very well on any of my sites. No easy answers apply across the board; these are choices I make.

Thanks again.

-- Nick