summaryrefslogtreecommitdiff
path: root/spec/html5_alignment.mdwn
blob: a04da5067d21cbc87df75a7c518ca5306aa74363 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
[[!meta title="Spec/HTML5 Alignment"]]
[[!meta author="James Bursa"]]
[[!meta date="2011-11-26T22:20:33Z"]]


[[!toc]] The way HTML's align
attribute interacts with CSS properties is only really explained in the
HTML5 spec. However, the explanation there is quite opaque. Here there
is a clearer version with more explanation.

Spec
----

    |  When a user agent is to align descendants of a node, the user
    |  agent is expected to align only those descendants that have both
    |  their 'margin-left' and 'margin-right' properties computing to a
    |  value other than 'auto', that are over-constrained and that have
    |  one of those two margins with a used value forced to a greater
    |  value, and that do not themselves have an applicable align
    |  attribute.
                                                  -- HTML5 10.2.4 original

Simplified:

    |  When a user agent is to align descendants of a node, the user agent
    |  is expected to align only those descendants that:
    |
    |   1  have both their 'margin-left' and 'margin-right' properties
    |      computing to a value other than 'auto',
    |
    |   2  are over-constrained, and that have a left or right margin with
    |      a used value forced to a greater value, and
    |
    |   3  do not themselves have an applicable align attribute.

                                                  -- tlsa's interpretation

I have separated the sentence where I think the criteria are and made it
more clear.

Further explanation
-------------------

### Criterion 1 detail:

A box that doesn't have either left, right, or both left & right margins
set to 'auto', to align the box "the CSS way".

### Criterion 2 example:

        #example2 { width:200px;
                    margin-left: 0;
                    margin-right: 0; }

        <div style="width:800px;">
            <div id="example2">
                This div meets criterion 2
            </div>
        </div>