CSS Tutorial
CSS Layout: Part Two
Display Property
This is one of the most useful properties. The complete list of values is in the appendix of this document, but the most useful ones follow.
block
Block display provides behavior similar to a default DIV element. A line break occurs at the close of the tag. Elements that are block by default are DIV, P, BLOCKQUOTE, H1 through H6, UL, OL, LI, ADDRESS, etc. Block elements accept width, height, top and bottom margins, and top and bottom padding. A block element constitutes a separate block box.
inline
Inline display creates no such line break. Elements that are inline by default are SPAN, IMG, INPUT, SELECT, EM, STRONG, etc. Inline elements do not accept width, height, top and bottom padding, and top and bottom margins, which makes good sense, since they are used for part of a line of text (i.e. of a block box).
They do, however, accept left and right padding, left and right margins, and line-height. Line-height can then be used to approximate height. If you need to apply width, height or other block properties to an inline element, consider assigning the element block display and/or floating it. Block display, of course, will force the element on to a separate line (unless the element is floated). Alternatively you can assign the inline-block value to make an inline element take block properties (see below).
none
Display set to "none" sets the element to invisible similar to the hidden value of the visibility property (see below). However, unlike the visibility property, this value takes up no space on the page. This is very useful for DHTML hidden tools and for other instances when you need items to expand and collapse based on whether they contain content to be viewed on demand. Moreover, when you generate content, items whose display is set to "none" will not be included in the loop. (For more on generated content, see below.) Display set to none will also be hidden from most screen readers. If you are trying to make something readable only for those with sight disabilities, use an off-screen class like this:
.offScreen {position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;}
inline-block
This value causes the element to generate a block element box that will be flowed with surrounding content as if it were a single inline box. It lets you place a block inline with the content of its parent element. It also allows you to assign properties associated with block display, such as width and height to an element that naturally takes inline display. This property is also used to trigger hasLayout in IE6, which is a difficult concept, but briefly means making IE6 assume certain properties.
run-in
This display mode causes the element to appear as an inline element at the start of the block immediately following it. If there is no block following a run-in element, it is displayed as a normal block instead. Currently, there seems to be no browser support for this value except for IE8, but here is an example of how it is coded, and how it should look.
<div style="display: run-in">Here is some run-in text on this line.</div>
<div style="display: block">But here is a block that follows it, so they are conjoined.</div>
Let's see if it works. Here is some run-in text on this line.
But here is a block that follows it, so are they conjoined? Well, apparently not in Firefox 3.6, but yes in Chrome 7.
list-item
Unordered lists are traditionally used to list bulleted items vertically. But you can assign bullets to other elements using the list-item value.
div {display: list-item;}
It may not make a lot of semantic sense to apply bullets to an element that is not a list item, but at the very least it's helpful that CSS is so flexible. However you use these values, ensure that your HTML is meaningful irrespective of your CSS. Because there is a wide variety of display values, HTML tags can be made to display in a variety of ways, some counter to the nature of the element. Care should be taken to maintain the implicit content of elements. Should you, for example, give a P element inline display? You can, but use caution. It is more likely that you will set the inline value for the DIV element. This seems to be more acceptable in that the DIV element simply provides separate treatment for content, while a paragraph is visually demarcated from other elements.
The remaining values for the display property apply mostly to XML transformations, and are found in the appendix. As of yet, support is limited.
Position Property
When we introduced floating, we said that it was non-normal flow. The other type of non-normal flow is through the position property. The W3C says, "The root of the document tree generates a box that serves as the initial containing block for subsequent layout."
There are four types of positioning: relative, absolute, fixed, and static.
Static positioning is simply the positioning that an element naturally takes in the HTML. Thus, you only specify static positioning to override relative, absolute, or fixed positioning.
Relative positioning offsets an element from its normal (static) positioning. It initially takes the position the normal (static) flow of the page gives it, but is subsequently offset by the top, bottom, left, and right properties. When a box is relatively positioned, the position of the following box is calculated as though the former were not offset relatively, even though the space the element originally took looks empty. Relative positioning is sometimes used to move an element a little bit, for example to align a label with its form element. But its main use is to set an anchor for positioning other elements absolutely.
Absolute positioning positions the element in relation to the first ancestor element that is itself relatively, absolutely, or fixed positioned. Otherwise it uses the BODY element as the ancestor and calculates positioning in relation to it, which in effect is in relation to the viewport (see fixed positioning below). This, by the way, is why many confuse absolute positioning with fixed positioning.
Since the absolutely positioned element is taken out of the normal document flow, the flow behaves as if the element is not there by closing up the space it would otherwise take, unlike relative positioning which retains the empty space. Caution must therefore be exercised when using absolute positioning. Let's say that you have a line of text absolutely positioned.
CSS:
.relText {position: relative;}
.absText {position: absolute; left: 100px; top: 100px;}
HTML:
<div class="absText">This is some absolutely positioned text.</div>
Now let's assume that within that element you place another absolutely positioned element.
<div class="relText">This is some relatively positioned text to create an anchor
for absolutely positioned text.</div>
<div class="absText">This is some absolutely positioned text.
<div class="absText">This too is embedded absolutely positioned text.</div>
</div>
As you would expect, the former container DIV that is absolutely positioned will be 100px below and to the left of its relatively positioned ancestor (with the class "relText"). However, the embedded DIV will be 100px below and to the left of the container DIV, its parent, since it too is absolutely positioned. Absolute positioning resets the element's coordinates to 0, 0 in relation to the relatively (or absolutely) positioned ancestor. Be advised that since an absolutely positioned element is removed from the flow, other elements do not "see" it, and visual collisions may occur. Elements can indeed be moved anywhere on the page with absolute positioning. However, if they are positioned independently, normal flow will become compromised and pages will display properly only under tight restrictions.
Fixed positioning positions the element in relation to the edge of the viewport. Again, absolute positioning does the same thing if no ancestor element has absolute or relative positioning assigned. A fixed element does not move during scrolling. With fixed positioning we can do away with frames, and can precisely position stationary background images. Unfortunately, IE6 does not support fixed positioning. CSS2.1 also added the "inherit" value to force an element to inherit an ancestor's positioning.
Before relying too much on non-static positioning, give thought to the possibility that the user may shut off CSS. You want to ensure that your page still makes visual sense when it displays without CSS, and logical sense for those using screen readers.
Left, Right, Top, and Bottom Properties
The left, right, top, and bottom properties can be assigned to relative, absolutely, and fixed positioned elements in order to specify the amount by which the element is offset from its static positioning. "right: 20px" does not mean move the element 20px to the right. It means move the element 20px pixels from the extreme right. Think of these properties as specifying the amount from the compass direction it is to be moved. The left and right properties are usually thought to be mutually exclusive, are as the top and bottom properties. For example, if left and right are used on the same element, right will be ignored in IE and in all browsers under most circumstances. If top and "bottom" are used on the same element, bottom will generally be ignored. However, in compliant browsers if you set your height to "auto", you may specify top and bottom and the container will stretch. It's a nice trick for equal height columns but suffers from the limitation that absolutely positioned elements are ignorant of other elements including whatever is in them. Because static positioning is default, the left, right, top, and bottom properties are ignored.
Z-index Property
The z-index property sets the stacking order of an element. An element can be assigned a stacking order (positive, zero, or negative) with the greater stack order always visually in front of an element with a lower stack order. The z-index property only works on elements that have been set by the position property to any value other than "static". This is a useful DHTML property for manipulating layers. Note that there is a bug with IE6 in that a drop list (that is, the SELECT element) does not accept a z-index. If a drop list lives vertically underneath a DHTML menu, it will show through on IE6. The workaround is known as the iframe shim, but as it is an HTML and JavaScript solution, it is not treated in this document.
Visibility Property
The visibility of an element can be set to "visible", "hidden", or "collapse". "hidden" and "visible" are useful when you want a designated area to alternate between showing and hiding text and/or images, but don't want surrounding content to shift up or down as it would using the display property with the "block" and "none" values. DHTML menus sometimes use this property. The element, even though hidden, still occupies space on the page, and is still part of generated content (see below for more on that).
The "collapse" value is used in table elements. This value removes a row or column, but it does not affect the table layout. The space taken up by the row or column will be available for other content. If this value is used on other elements, it renders as "hidden". Hidden text is also hidden from most screen readers, and thus the off-screen class introduced above is a better way of hiding an element from a sighted user.
Overflow Property
When boxes are positioned there will be times when the size of a content box exceeds its available space. The overflow property tells the browser how to handle such events. The values are "visible", "hidden", "scroll", "auto", and "inherit".
The "visible" value does not clip the content. It renders outside the element. The "hidden" value obviously hides (clips) the content that exceeds the allotted size, without using scrollbars. The "scroll" value also clips the excess but introduces scrollbars to view the clipped portion. The "auto" value will display scrollbars to see the rest of the content if necessary, but will hide them if there ends up being available space.
CSS3 adds overflow-x and overflow-y to define horizontal and vertical overflow respectively.
Clip Property
The little-used clip property is used to mask images, generally so that you do not have to create multiple version of the same image. It only works with absolute positioning. The only shape is "rect", for rectangle. It is followed by coordinates to express the dimensions in clockwise fashion starting from "top". The W3C spec calls for commas between the coordinates since this is a function. However, to make this property work in IE leave off the commas, since, as the W3C admits, the early specification was vague.
The clip property may seem counter-intuitive if you think of the four values behaving like padding overlaying the image. They do not refer to the top, right, bottom, and left sides of the frame in terms of width. Instead, the top and left values set the top left corner of the clipped area, with 0 being no clip. If you set top and left to 30px each, the clip will extend 30px from the top and left. The right and bottom values work in tandem to draw the clipping region in relation to the top left corner, which is why those values are much higher in the example.
First, here is the full-sized, unclipped image.
This is the same image clipped according to this code sample.
position: absolute; clip: rect(10px 125px 70px 58px);
Since clipping only masks part of the image without removing it, you may want to offset it with the left and top properties to make it sit where it would sit if it were as small as it appears. This is easy because it is already absolutely positioned. This is the same image clipped and reset left and top.
position: absolute; clip: rect(10px 125px 70px 58px); left: -58px; top: -10px;