37705 - Trying to block-center using nested DIVs

Status: VERIFIED INVALID

(Core :: CSS Parsing and Computation, defect, P3)

Description

[aaron]

Hi,

I am using Mozilla M15 under Windows NT 4.0 to test my Web site, which is 
currently only published locally.

     What I am trying to do is block-center a paragraph of text,
     meaning that the paragraph will be displayed in a box of a
     fixed width, centered horizontally in the window.  My idea
     for this was to have a DIV that centered a section of the
     text, and another DIV nested inside that to specify a
     paragraph.  The two DIV classes are specified in a CSS file
     available to every page within the site.  The resulting
     paragraph should appear to float in the middle of the page.

I don't know whether this is actually supposed to work.  The page renders 
incorrectly in M15, creating a paragraph of the right width but flushing it left 
instead of block-centering it.  The page renders correctly in IE 5.01, although 
I wouldn't trust it for some other things as far as I could throw it.  However, 
I couldn't find anything in the HTML 4.0 specs about how nested DIV blocks 
should be rendered.

Is Mozilla intended to allow for nested DIVs?

Comment 1

[David Baron :dbaron: (⌚️UTC-5, no longer working on Mozilla)]

Nested DIVs are allowed?  But what are you using to center?  The CSS text-align
property doesn't apply to blocks - only the line boxes inside them.

Comment 2

[Pierre Saslawsky]

Sorry Aaron, we can't second-guess your code. I'm going to close this bug as 
Invalid but feel free to reopen it if you attach a testcase to it.

If you need some information about page design techniques using CSS, several 
sites and books are available. If you need to work with absolutely positioned 
blocks, I recommend you to download a recent daily build that implements the most 
recent specifications on the matter.

Comment 3

[aaron]

Attachment: An example that works in IE5 but not Mozilla M15

Comment 4

[Pierre Saslawsky]

To center a DIV with a specified width, you should use margin-left:auto and 

margin-right:auto. See the comments from David Baron in bug 37083.

Comment 5

[Pierre Saslawsky]

Attachment: fixed testcase

Comment 6

[Pierre Saslawsky]

Note that "text-align:justify" doesn't work on the Mac (bug 36417) but the 
testcase above should display fine on Windows and Unix.

Comment 7

[Hixie (not reading bugmail)]

Verified per comments above.