In the normal flow, boxes participate in the layout formatting context. The block boxes are part of the block formatting context while the inline boxes are part of the inline formatting context.

In a block formatting context boxes are laid out vertically, one after the other. The distance between boxes is defined by their margins.

In an inline formatting context boxes are laid out horizontally (not surprisingly!). The areas between them depend on the margins (borders and paddings) while their vertical alignment is not clearly defined, meaning that their tops or bottoms might be aligned themselves or the baselines of text within them.

If the height of the inline box is smaller then the height of the line box, the vertical alignment may be defined by the vertical-align property. Same principle is applied for the horizontal alignment of the inline box; thus if the width of the box is smaller then the width of the containing block, the horizontal alignment (distribution) of text or elements may be defined by the text-align property.

The width of boxes in either of the mentioned formatting models depend on the defined width property, intrinsic (existing) width, internal text length or a floated element (left or right from the box).

If the inline box exceeds the width of the line box, it will be split in several boxes that will be distributed across several line boxes. That works every time except if there is a special rule applied to the inline box, i.e. white-space property is set to nowrap or pre value, in which case the inline box overflows the line box.

Relative positioning

A box that have been laid out in a normal flow model or floated may be shifted (offset) relatively to its position. Such relative positioning is assigned via property position. The box that has been offset relatively has no affect to the following box and for that reasons these boxes might overlap; in such a case if the overflow property is set to auto or scroll value, the appearance of scrollbars might affect the layout of the page.

To move a box horizontally, left and right properties are used; where left property moves the box to the right and right property moves it to the left. The formula for calculating the values is: left =- right.

If both properties are set to auto the boxes remain in their original positions, meaning that both of the properties are calculated as "0". If left is auto its used value is -right, meaning the boxes will move to the right; if the right is set to auto same principle and opposite movement direction apply to the left property.

If neither of the properties is set to auto one of them will have to be ignored (due to position being "over-constrained") depending on the text direction; thus if the direction property is set to ltr, the value of left wins and, naturally, if the direction is set to rtl, the value of right wins.

The properties top and bottom share the same rules as left and right with the difference that if neither is set to auto then the bottom will be ignored by default.

Example

Example of CSS normal flow:

 

›› go to examples ››