[thelist] Centering horizontally on page, IE5-compatible

[Dave Merrill]

Thanks for the steer. I knew about most of this technique, except that
setting min-width on the body was new to me, to fix Navigator/Mozilla/win's
handling of narrow browser windows. (Firefox 1.01 doesn't have this problem
apparently, since I don't see it without min-width; don't have Nav or Moz,
so didn't know about the issue.)

However, a fairly serious problem remained, with an odd solution:

  Inside the div corresponding to #wrapper in the example, I have an h1,
several <p>s and a table (which really is a data table, btw). In spite of
the text-align: left on the #wrapper div, the text in the <p>s and inside
the table cells stayed centered. Happens w IE6/55/50, Opera75 and
Firefox101.
  If I apply the text-align: left to #wrapper, and also to #wrapper td,
#wrapper th, and #wrapper p, that fixed most issues. However, items that
should be right aligned in their table cells moved left, and couldn't be
moved back, even with cell-id-explicit text-align: right.
  I don't understand why this is, since I thought the most specific spec
should apply, but all browsers I have do this. Interestingly, <p>s can be
moved right this way, just not table cell content. Odd.

The solution turned out to be one I don't understand either. Inside #wrapper
I have three more divs, #hdr, #page_html, and #ftr, one after the other. If
instead of setting text-align: left on #wrapper and its td/th/p's, I set it
on those three divs, everything seems to work like it should, in all
browsers I have. That's also better since it applies to all tags, not just
specific ones I've seen have problems. I don't understand what principle is
at work here, but I'll take it.

For reference for anybody looking at this thread, the punch line code from
the css-discuss page is below; more comments about it are there:

Dave Merrill


---------
body {
  text-align: center;
  min-width: 500px;
}
#wrapper {
  text-align: left;
  width: 500px;
  margin-left: auto;
  margin-right: auto;
}
---------

> > Is there any css-based way to center a block element horizontally on the
> > page that works for IE5/win? It also needs to work for other relatively
> > popular browsers going back a ways, on Mac and Win and ideally 'nix.
>
> Centering with IE Win 5 requires some extra work. This page has
> some good tips.
>
> http://css-discuss.incutio.com/?page=CenteringBlockElement