BrainJar.com: CSS = Positioning

Home | = 1 | 2 | 3 | 4 | 5 =

CSS Positioning

Review the W3C CSS standard = recommendation.=20

To use CSS for layout effectively, it helps to know how it's used to = position=20 page content. This article gives an overview of the methods and rules = that=20 govern visual rendering in the CSS2 specification. It also points out = some=20 things to watch out for.

Although the specification applies to any device for displaying web = pages,=20 this article focuses on how it works in browsers. Many details are left = out for=20 the sake of simplicity. For a definitive reference, see the standards=20 publication.

It's important to remember that a given browser may not support a = given=20 feature or may even implement it incorrectly. Also, there is some leeway = provided within the standards where individual browsers are free to deal = with=20 situations as they please. Where appropriate these inconsistencies are=20 noted.

The Box Model

To understand positioning in CSS you must first understand the box = model. For=20 display purposes, every element in a document is considered to be a = rectangular=20 box which has a content area surrounded by padding, a border and = margins. The=20 illustration below shows these various parts.

content content content content content = content content=20 content content content content content content content content content = content=20 content content content content content content content content content = content=20 content content content content content content content content content=20

=20 margin =20 border =20 padding =20 content

Margins are always transparent. Borders come in various styles. = Background=20 settings for an element apply to the the area just inside the borders = which=20 includes both the padding and content areas. For purposes of = illustration=20 however, the padding area is shown in a slightly darker color.

When referring to boxes throughout this article, the term "margin = edge,"=20 "border edge", etc. means the the outer boundary of the corresponding = box area=20 as shown above.

Margins, borders and padding are all optional but for purposes of = calculating=20 positions and sizes they are given a default width of zero if not = specified.=20 Different widths can be set for each individual side (top, right, bottom = and=20 left) if desired. Margins can even have negative values.

The width and height of each box is equal to the width and height of = the=20 outer margin box. Note that this is not the necessarily the same as the = width=20 and height of the content area.

A box can contain any number of other boxes, creating a hierarchy of = boxes=20 that corresponds to the nesting of page elements. The browser window = serves as=20 the root element for this hierarchy.

Box Types

There are two basic types of boxes, block and inline. = Block=20 boxes are generated by elements such as P, DIV or TABLE. Inline boxes = are=20 generated by tags such as B, I or SPAN and actual content like text and=20 images.

The box type may also be set using the display property. = Setting=20 a value of block on an inline element, for example, will = cause it=20 to be treated as a block element. Note that if you set the display to=20 none, no box is created. The browser acts as if the element = did not=20 exist. Likewise, any nested elements are ignored as well, even if they=20 specifically declare some other display value.

There are other types of boxes which apply to = special=20 elements like lists and tables. However, these are ultimately treated as = block=20 or inline boxes for positioning purposes. As such, these other box types = not=20 covered here.

Containing Blocks

Block boxes act as a containing block for any boxes within = them. For=20 example, in this code:

<div>
This is the first sentence.
<p>This is the second sentence.</p>
</div>

the DIV element establishes a containing block for both the first = string of=20 text and the P element. The P element in turn creates a containing block = for the=20 second text string.

It's interesting to note that while the text of the first sentence in = the=20 above example generates an inline box, there is considered to be block = box=20 surrounding it. These "anonymous" block boxes are used to simplify the=20 positioning process. The result is that a block box will only contain = either all=20 inline boxes or all block boxes, even if some of those block boxes only = act as a=20 wrapper for an inline box.

This containing block is used in determining both the position of the = boxes=20 within it and in some cases, the dimensions of those boxes. For example, = if an=20 element has a style setting of width:50%; its width will be = set to=20 half the width of its containing block.

For any element that is not absolutely positioned, the containing = block is=20 considered to be the content edge of its most recent, block-level = ancestor. If=20 none exists, the browser window serves as the containing block. = Absolutely=20 positioned elements are discussed separately.

Positioning Schemes

There are three positioning modes or schemes in CSS2: normal, float = and=20 absolute. Each has its own set of rules. Every box is positioned using = one of=20 these schemes but different boxes will use different schemes depending = on their=20 position and float style settings.

Normal Flow

Normal flow is the default scheme used for positioning. It applies to = any=20 element that does not specify position:absolute or=20 fixed and is not floated.

In this scheme, block boxes flow vertically starting at the top of = their=20 containing block with each placed directly below the preceding one. = Inline boxes=20 flow horizontally from left to right.

You should note that vertical margins are collapsed in the normal = flow. That=20 is, instead of adding the bottom margin of a box to the top margin of = the one=20 immediately below it, only the larger of the two values is used, as = illustrated=20 here.

content content content content content = content content=20 content content

content content content content content = content content=20 content content content content content content content content content = content=20 content

Horizontal margins, however, are never collapsed.

Next =

BrainJar.com =C2=B7 =C2=A91999-2009 by = Mike=20 Hall Home | 1 | 2 | 3 | 4 | 5=20