W3C home > Mailing lists > Public > html-tidy@w3.org > January to March 2001

Re: About HTML 4.01 Strict

From: J. David Bryan <jdbryan@acm.org>
Date: Mon, 12 Feb 2001 23:11:23 -0500
Message-Id: <200102130411.f1D4BOX13320@mail.bcpl.net>
To: HTML Tidy List <html-tidy@w3.org>
On 12 Feb 2001, at 17:26, Mark Renouf wrote:

> I orginally had a <div align="center"> around the whole
> page so that the 400px block would sit centered on the page, with
> the text wrapped within it, left aligned, and the banner centered.
> 
> How do I accomplish this without using the align attribute?

The correct CSS method is to use:

  margin-left: auto; margin-right: auto

...on your DIV, i.e.:

  <div style="margin-left: auto; margin-right: auto; width: 400px; ...>

From the CSS1 spec, section 4.1.2 (Horizontal Formatting):

  "...If both 'margin-left' and 'margin-right' are 'auto', they will be
   set to equal values. This will center the element inside its parent." 

That works correctly on Opera 5 and Netscape 6.  It fails in IE 5 and 
Netscape 4 due to browser bugs.  A workaround for these is to enclose your 
existing DIV with another DIV and put the text-align on that one, i.e.:

  <div style="text-align: center">
    <div style="width: 400px; ...>
      ...
    </div>
  </div>

But this is ignored in Opera 5 and Netscape 6, as it should (the CSS spec 
says that text-align "...describes how inline content of a block is 
aligned" -- note the restriction to *inline* content).  Combining the two 
methods will work in all four listed browsers.

(This is a bit off-topic for the HTML Tidy list; excellent advice for CSS 
is available on the "comp.infosystems.www.authoring.stylesheets" USENET 
newsgroup.)

                                      -- Dave
Received on Monday, 12 February 2001 23:11:36 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Tuesday, 3 April 2012 06:13:45 GMT