Manipulating Text

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

    margin     border     padding     content

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

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

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

Normal Flow

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

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

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

Horizontal margins, however, are never collapsed.

Floating is achieved by setting the float property on an element's style to either left or right. Special rules apply to floated elements.

When specified, the box is positioned vertically as it would be within the normal flow, its top aligned with the top of the current line box. But horizontally, it is shifted as far to the right or left of its containing block as possible, within that block's padding (just like other content). Surrounding inline content is then allowed to flow around the opposite side.

The illustration below shows the result of code like the following, where a floated element is defined as part of inline text (margin, border and padding styles have been omitted for brevity).

The float property can be set to one of left, right, none or inherit.

There are a few things you should note regarding floated boxes. For one, the box being floated should have a width defined for it, either explicitly or implicitly. Otherwise, it will fill its containing block horizontally, just like non-floated content, leaving no room for other content to flow around it. As such, floated boxes are always treated as block boxes, even if they are defined using inline elements.

Second, unlike boxes in the normal flow, the vertical margins of a floated box are not collapsed with the margins of boxes either above or below it.

Finally, a floated box can overlap block-level boxes adjacent to it in the normal flow. Here's an example where the floated element has much more text than its containing block. Another paragraph has been added to the previous code to demonstrate.

<p>
  <span style="float:right;width:40%;">
    content content content content 
    content content content content...
  </span>
  content content content content...
</p>

<p>
content content content content
content content content content...
</p>

Note that the floated box overlaps the borders of both its parent box and one following it (although the text in the second block flows around the float). This can be avoided using the clear property.

Setting clear:right; on the second box moves it down to just below the floated box. Here's an example using code similar to the last.

<p>
  <span style="float:right;width:40%;">
    content content content content 
    content content content content...
  </span>
  content content content content...
</p>

<p style="clear:right;">
content content content content
content content content content...
</p>

This causes the top margin of the second box to be increased just enough to place the second paragraph's border and content just below the floated box.

The float still overlaps the top box (the paragraph that contains it) but that's because the example was purposely set up to do that, using a large amount of content in the floated element compared to the surrounding content.

Normally this would be avoided by placing the floated outside of the paragraph and letting both paragraphs flow around it.

<span style="float:right;width:30%;">
  content content content content...
</span>

<p>content content content content...</p>

<p>content content content content...</p>

The clear property can be set to one of left, right, both, none or inherit. It only has meaning for block-level elements.

When two or more adjacent elements are floated, their tops are positioned on the same line (side by side) if there is sufficient horizontal space to accommodate them. If not, the latter element(s) are moved down to a position where there is sufficient space, always aligned with a line box.

It should be noted that this downward shift may also occur for a single floated element if it's too wide to fit within its initial position with adjacent content.

The illustration below shows the effect of placing two right-floated elements next to each other. Note how the first floated element appears farthest to the right.

The clear property can be used on a floated element to force it below adjacent floats (recall that floated elements are treated as block-level elements for positioning). Just remember that vertical margins are not collapsed for floated boxes. Here's an illustration of the same code but with clear:right set for the second floated element.

Absolute Positioning

This positioning scheme applies to any element that has its position property set to absolute or fixed.

Such boxes are removed from the normal flow and have no effect on boxes in that flow. Like floated elements, absolutely positioned elements are always treated as block-level elements. As such, they establish a new containing block for any descendants, i.e., any elements contained within the absolutely positioned element.

The position of an absolutely positioned element is determined by its offset values: top, right, bottom and left. These values work in much the same way as with relatively positioned elements.

But unlike relative positioning, where the offsets are measured from the element's position in the normal flow, an absolutely positioned element is offset from its container block.

Container Block for Absolutely Positioned Elements

The containing block of an absolutely positioned element is defined a little differently than it is for other elements. The containing block for an absolutely positioned element is established by its closest, positioned ancestor. That is, the nearest element outside it that has a position of absolute, relative or fixed. If there is no such ancestor element, the initial containing block (the browser window) is used.

Recall that non-absolutely positioned elements used the containing block of their closest, block-level ancestor. But for absolute elements the containing element can be an inline element.

Additionally, if that containing element is a block-level element, the padding edge of that element forms the container block, not the content edge. In other words, the offsets are measured from just inside the border of the containing element.

If the containing element is an inline-level element, it gets a little more complicated. Since an inline element may generate several line boxes, the container box is defined as the area bordered by the top and left content edges of the first box within that element and the bottom and right content edges of the last box it contains.

For example, consider a relatively positioned SPAN that contains text taking up two lines, some of which is bolded.

In the illustration above, the containing block would be the shaded area encompassing the first and last line boxes.

Note that while margins are honored with absolutely positioned elements (position offsets are measured from the margin edge of the element's box) they are otherwise meaningless since absolutely positioned elements do not participate in the normal flow.