Absolutely positioned elements
This specifies the type of box that an element will produce. Possible values are block (e.g., P), inline (e.g., B), list-item (block element with list item marker box; e.g., LI), run-in (see below), compact (see below) and none (ignore element entirely and all of its descendants).
Display applies to all elements, has an initial value of inline and is not inherited.
IE 3 does not support display. IE 4 on the PC does not support display except for none. IE 5 supports block, inline and none. Opera supports block, none and inline. IE 4 on the Mac supports none. Netscape only supports none usably.
If a compact box is followed by a non-floating block element, then it will go in the block element's left margin if there is room, but otherwise it will behave like a block element:
<P style="display: compact">
Compact box here
</P>
<P style="margin-left: 40%">
Block element with big left margin
</P>
Compact box here Block element with big left margin
<P style="display: compact">
Compact box here
</P>
<P style="margin-left: 4%">
Block element with big left margin
</P>
Compact box here
Block element with smaller left margin - so goes on next line
The width of compact elements is entirely determined by the width of their content (i.e., the width property has no effect unless they act as block elements). As a result, if they are wider than one line, they will be forced to act as block elements.
Note that where a compact box and block element are on the same line, for the purposes of calculating the height of the line box (see line-height), the compact box is taken into account. Note also that text-align: right would be applied to a compact element within the block element's margin. Text-align: justify would not be applied.
If a run-in box is followed by a non-floated block-level element, it is formatted as an inline element within that box. Otherwise it is treated as a block element.
E.g.:
<H1 style="display: run-in">
A run-in heading
</H1>
<P>
A P element
A run-in heading A P element
Height is principally used to specify the height of block and replaced elements.
Heights can be specified as a length, % (of parent's height, but treated as auto if the parent did not have an explicitly set height), or as auto (which is the initial value).
P {height: 100px}
Height applies to all elements except non-replaced inline, table columns and column groups. Height is not inherited and can't be negative.
Note that 'height' does not specify the total height of the element, but only the height of its content, so that margins and borders are additional to 'height'.
Widths can be specified as a length, % (relative to the width of the containing block), or as auto (which is the initial value). It does not apply to non-replaced inline elements (whose width is the width of their content, subject to the fact that they might occupy several lines of a containing block), to table rows or row groups. Width cannot be negative.
Width specifies the content width of an element. Therefore an element with a width of 100 pixels, a left margin of 100 pixels and a right margin of 100 pixels will occupy 300 pixels of space.
Width is not inherited.
Although width, margins and height will normally behave in an intuitive manner, it is useful to know how they work, especially since they do not always do what you expect.
To find the width and height of elements, precise rules are used. These are described below.
Width is inapplicable (it is that of the content), and all auto values are replaced with 0.
For example: <SPAN>some text</SPAN>. In this example, the initial values for margin-left and margin-right are auto. As stated, this will be treated as 0. The initial value for width is also auto; this will be treated as the width of the element's content.
If an element is replaced (such as IMG), width: is replaced by the intrinsic values for the elements, and other auto values are treated as 0.
All auto values become 0, meaning that floating non-replaced elements must have an explicit width.
Width: auto is replaced by the element's intrinsic width, and all other auto values by 0.
Generally, width + padding-left + padding-right + margin-left + margin-right +
border-left-width + border-right-width = width of the containing block.
It should be noted that border widths are only of relevance if a border style has been set.
This equality is solved by the browser.
On the root element (i.e., BODY or HTML) the width of the parent element is that of the viewport (or window).
1. If all the values are set to a value other than auto, then margin-right is adjusted to satisfy the equation.
If the equality cannot yet be solved, the rules below are used.
2. If exactly one of the values is set to auto, the value is put in for it to satisfy the equation.
3. If width: auto, then any other remaining auto values are replaced with 0, and a value is put in for width to satisfy the equality.
4. If margin-left and margin-right are both still auto, they will be set to equal values.
If the equality cannot yet be solved, the rules below are used.
2. If an element is replaced (such as IMG), width: auto is replaced by the intrinsic value for the element.
3. If margin-left and margin-right are both still auto, they will be set to equal values.
For absolutely positioned elements, the sum of the element's horizontal properties must add up to the width of the containing block. Therefore the following equation must be observed.
Left + width + padding-left + padding-right + margin-left + margin-right + border-left-width +
border-right-width + right = width of the containing block.
Height: auto becomes the element's intrinsic height, and all other auto values become 0.
All auto values are set to 0, and height is ignored.
Apart from height, all auto values are set to 0. If height: auto, then if the element only has inline children, height is the distance from the top of the top line box to the bottom of the bottom one.
If it has block children, it is from the top border-edge of the topmost block child box (including anonymous boxes (i.e., those generated by the element itself)) to the bottom border-edge of the bottommost block child box.
The equation is top + height + padding-top + padding-bottom + margin-top + margin-bottom +
border-top-width + border-bottom-width + bottom = height of the parent.
You might well have found the above a bit too much. It is very significant, however, so here's some examples of the significance that it has. Say you want to give an element a width of 50% and a right margin of 25%. You might think that you can do that with ELEMENT {margin-right: 25%; width: 50%}. Not so, however, since margin-left's initial value is 0, so that statement is equivalent to ELEMENT {margin-left: 0; margin-right: 25%; width: 50%}. Since the element's properties must sum to 100%, and 50% + 25% is only equal to 75%, it is necessary to disregard one of the values. That value is margin-right (as stated above), so in fact you will get a right margin of 50%. To avoid this problem, you would specify margin-left: auto, which would mean that the element is no longer overconstrained.
A similar example to this is the case where you wish to center the element (not the text in the element, the box itself). This would be done with a statement like P {margin-left: auto; margin-right: auto; width: 50%}. Since, if margin-left and margin-right are set to auto, the margins will be set to equal values, this will center the element. Thus it is equivalent to margin-left: 25%; margin-right: 25%; width: 50%.
Another important example is where you have positioned an element:
#fixed {top: 80%;
bottom: 0;
position: fixed;
height: 20%}
In this example the desired effect won't be achieved, since the element is overconstrained, as all of top, bottom, margin-top (initial value is 0), height and margin-bottom are set to a value other than auto, bottom will be ignored. To avoid this, you should set margin-top: auto, since this would remove the overconstrained nature of the element.
<P style="margin-left: 50%; line-height: 15px">
<br>
<br>
</P>
This would result in a P element with width equal to 50% of its containing block and 45 pixels high.
<P style="margin-left: 50%; margin-right: 0; width: 100%">
</P>
Since the P element is overconstrained, margin-right is ignored and therefore it is given margin-right: -50%.
These properties specify the minimum and maximum widths and heights of elements; they apply to all elements except non-replaced inline and table elements, and are not inherited.
They specify a % (relative to containing block width in the case of width, or its height in the case of height) or a length. In addition, the max's may take the keyword 'none'. The mins are initially 0, and the initial max value is none.
They influence elements thus:
These are of use when you do not want to be constrained by an actual height or width, but want to ensure that your element does not exceed or go below a certain height. They are particularly useful in ensuring, for instance, that a table does not go beyond the page width.
For example, specifying P {width: 30%; min-width: 200px} could be used to make the P 30% of the width of the containing block wide, but a minimum of 200 pixels wide.
Thus concludes this section of the CSS2 tutorial. To continue to the next section, which considers generated content, click here.
Copyright © RichInStyle.com 2000; all rights reserved. See copyright document for terms of use. Please visit Bukit Lawang flood appeal.