CSS Floats and Positioning Level 3

2.1 Declaring a float

This property specifies whether a box should float content around itself, or not at all. It may be set for any element, but only applies to elements that generate boxes that are not absolutely positioned when values 'left' and 'right' are used. The values of this property have the following meanings:

left

The element generates a block box that is floated to the left. Content flows on the right side of the box, starting at the top (subject to the 'clear' property).

right

Similar to 'left', except the box is floated to the right, and content flows on the left side of the box, starting at the top.

positioned

(New) The element generates a block box that is positioned using the positioning properties. Content flows around the sides of the box, starting at the content directions start position. Note that the term "positioned float", as used in this document, is open for debate, and new suggestions are welcome.

none

The box is not floated.

User agents may treat float as 'none' on the root element.

Here are the precise rules that govern the behavior of 'left' or 'right' floats [CSS21]:

1. The left outer edge of a left-floating box may not be to the left of the left edge of its containing block. An analogous rule holds for right-floating elements.
2. If the current box is left-floating, and there are any left-floating boxes generated by elements earlier in the source document, then for each such earlier box, either the left outer edge of the current box must be to the right of the right outer edge of the earlier box, or its top must be lower than the bottom of the earlier box. Analogous rules hold for right-floating boxes.
3. The right outer edge of a left-floating box may not be to the right of the left outer edge of any right-floating box that is next to it. Analogous rules hold for right-floating elements.
4. A floating box's outer top may not be higher than the top of its containing block. When the float occurs between two collapsing margins, the float is positioned as if it had an otherwise empty anonymous block parent taking part in the flow. The position of such a parent is defined by the rules in the section on margin collapsing.
5. The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source document.
6. The outer top of an element's floating box may not be higher than the top of any line-box containing a box generated by an element earlier in the source document.
7. A left-floating box that has another left-floating box to its left may not have its right outer edge to the right of its containing block's right edge. (Loosely: a left float may not stick out at the right edge, unless it is already as far to the left as possible.) An analogous rule holds for right-floating elements.
8. A floating box must be placed as high as possible.
9. A left-floating box must be put as far to the left as possible, a right-floating box as far to the right as possible. A higher position is preferred over one that is further to the left/right.

If, within the block formatting context, there is an in-flow negative vertical margin such that the float's position is above the position it would be at were all such negative margins set to zero, the position of the float is undefined.

References to other elements in the above rules refer only to other elements in the same block formatting context as the left or right float.

The precise rules for 'positioned' floats are as follows:

1. The 'position' property is used to determine the type of positioning scheme the positioned-float box will assume when positioning the box.
2. Position of position-float boxes is determined using the positioning rules of Chapter 10 in [CSS21].
3. The static position of a positioned-float box is determined once prior to reflowing any content around the position-floated box. Note that this avoids any circular dependency of static position from reflow due to interaction of positioned-float with other content.
4. The static position of a positioned-float box is not affected by the placement of any other positioned-float boxes. Note this interaction may change in a later version of CSS.
5. A positioned-float box intersects with other elements in the same or other block formatting contexts. Note that this may cause elements to overlap and they may not be floated around the positioned-float box in all cases.
6. A positioned-float box may be positioned outside of its containing block, but the normal flow outside its containing block is not affected.

#figure
  {
  	width: 100px;
	height: 100px;
	background-color: blue;
	
	float: positioned;
	position: absolute;
	bottom: 50px;
	left: 40%;
  }

Positioned float 50px above bottom border and 40% container from the left containing block border.

2.2 Computing the containing block

The values of this property have the following meanings:

static

The box is a normal box, laid out according to the normal flow. The 'top', 'right', 'bottom', and 'left' properties do not apply. (Note that the precise interpretation of float: positioned and position: static is still an open issue.)

relative

The box's position is calculated according to the normal flow (this is called the position in normal flow). Then the box is offset relative to its normal position. When a box B is relatively positioned, the position of the following box is calculated as though B were not offset. The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.

absolute

The box's position (and possibly size) is specified with the 'top', 'right', 'bottom', and 'left' properties. These properties specify offsets with respect to the box's containing block. Absolutely positioned boxes are taken out of the normal flow. This means they have no impact on the layout of later siblings. Also, though absolutely positioned boxes have margins, they do not collapse with any other margins.

fixed

The box's position is calculated according to the 'absolute' model, but in addition, the box is fixed with respect to some reference. As with the 'absolute' model, the box's margins do not collapse with any other margins. In the case of handheld, projection, screen, tty, and tv media types, the box is fixed with respect to the viewport and does not move when scrolled. In the case of the print media type, the box is rendered on every page, and is fixed with respect to the page box, even if the page is seen through a viewport (in the case of a print-preview, for example). For other media types, the presentation is undefined. Authors may wish to specify 'fixed' in a media-dependent way. For instance, an author may want a box to remain at the top of the viewport on the screen, but not at the top of each printed page. The two specifications may be separated by using an @media rule, as in:

@media screen { 
  h1#first { position: fixed } 
}
@media print { 
  h1#first { position: static }
}

User agents must not paginate the content of fixed boxes. User agents may choose to treat 'position: fixed' positioned floats as position: page.

Note that user agents may print invisible content in other ways. See "Content outside the page box" in Chapter 13, Paged media. [CSS21]

page

(New) The box's position is calculated according to the 'absolute' model, but in addition, the box containing block is always the initial containing block. As with the 'absolute' model, the box's margins do not collapse with any other margins. In the case of the print media type, the box is rendered only on the initial page. UAs may paginate the content of paged boxes. Note that CSS Regions are also initial containing blocks, in accordance with section 3.1 of the CSS Regions Module.

In the illustration following the example, content has been spread across two pages. A positioned float embedded in the content will be positioned 50px from the bottom edge of whatever page the positioned float is rendered in.

#figure
  {
  	width: 100px;
	height: 100px;
	background-color: blue;
	
	float: positioned;
	position: page;
	bottom: 50px;
  }

Note that when float: positioned and position: page is set, the position of the positioned float is calculated relative to the initial containing block and is not updated repeatedly as the containing block moves (for example, when content in the user agent window is scrolled).

The first image below shows how the positioned float is offset from the bottom of the initial containing block, while the second image shows that the positioned float remains in its initial position relative to content, even after the content is moved relative to the viewport.

#figure
  {
  	width: 200px;
  	height: 100px;
  	background-color: blue;
  	
  	float: positioned;
  	position: page;
  	bottom: 50px;
  }

In the following illustration, a positioned float has been positioned based on the initial position of the content relative to the UA window.

In the following illustration, the positioned float's position is maintained, even as the content scrolls upward.

User agents may treat position as 'static' on the root element.

2.3 Relationships between 'display', 'position', and 'float'

The three properties that affect box generation and layout - 'display', 'position', and 'float' - interact as follows:

1. If 'display' has the value 'none', then 'position' and 'float' do not apply. In this case, the element generates no box.
2. Otherwise, if 'position' has the value 'absolute', 'page' or 'fixed', and the value of 'float' is 'left' or 'right', the box is absolutely positioned and the computed value of 'float' is 'none'. The 'display' is set according to the table below. Positioning of the box will determined by the 'top', 'right', 'bottom' and 'left' properties and the box's containing block.
3. Otherwise, if 'position' has the value 'absolute', 'page' or 'fixed', and the value of 'float' is 'none', the box is absolutely positioned and floated. The 'display' is set according to the table below. Positioning of the box will determined by the 'top', 'right', 'bottom' and 'left' properties and the box's containing block.
4. Otherwise, if 'float' is other than 'none', the box is floated and 'display' is set according to the table below.
5. Otherwise, if the element is the root element, 'display' is set according to the table below, except that it is undefined in [CSS21] whether a specified value of 'list-item' becomes a computed value of 'block' or 'list-item'.
6. Otherwise, the remaining 'display' property values apply as specified.

2.4 Comparison of normal flow, floats, and absolute positioning

To illustrate the differences between normal flow, relative positioning, left and right floats, positioned floats, and absolute positioning, we provide a series of examples based on the following HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>Comparison of positioning schemes</TITLE>
</HEAD>
<BODY>
<P>Beginning of body contents.
  <SPAN id="outer"> Start of outer contents.
  <SPAN id="inner"> Inner contents.</SPAN>
  End of outer contents.</SPAN>
  End of body contents.
</P>
</BODY>
</HTML>

In this document, we assume the following rules:

body { display: block; font-size:12px; line-height: 200%; 
   width: 400px; height: 400px }
p    { display: block }
span { display: inline }

The final positions of boxes generated by the outer and inner elements vary in each example. In each illustration, the numbers to the left of the illustration indicate the normal flow position of the double-spaced (for clarity) lines.

Note. The diagrams in this section are illustrative and not to scale. They are meant to highlight the differences between the various positioning schemes in CSS, and are not intended to be reference renderings of the examples given.

#outer { color: red }
#inner { color: blue }
			

#outer { position: relative; top: -12px; color: red }
#inner { position: relative; top: 12px; color: blue }
			

#outer { color: red }
#inner { float: right; width: 130px; color: blue }
			

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>Comparison of positioning schemes II</TITLE>
</HEAD>
<BODY>
<P>Beginning of body contents.
  <SPAN id=outer> Start of outer contents.
  <SPAN id=inner> Inner contents.</SPAN>
  <SPAN id=sibling> Sibling contents.</SPAN>
  End of outer contents.</SPAN>
  End of body contents.
</P>
</BODY>
</HTML>
			

#inner { float: right; width: 130px; color: blue }
#sibling { color: red }
			

#inner { float: right; width: 130px; color: blue }
#sibling { clear: right; color: red }
			

#outer { 
position: absolute; 
top: 200px; left: 200px; 
width: 200px; 
color: red;
}
#inner { color: blue }
			

#outer { 
position: relative; 
color: red 
}
#inner { 
position: absolute; 
top: 200px; left: -100px; 
height: 130px; width: 130px; 
color: blue;
}
			

#outer { color: red }
#inner {
position: absolute; 
top: 200px; left: -100px; 
height: 130px; width: 130px; 
color: blue;
}
			

<P style="position: relative; margin-right: 10px; left: 10px;">
I used two red hyphens to serve as a change bar. They
will "float" to the left of the line containing THIS
<SPAN style="position: absolute; top: auto; left: -1em; color: red;">--</SPAN>
word.</P>
			

#outer { 
float: positioned;
position: absolute; 
top: 0px;
left: 100px;  
color: red;
}
#inner { color: blue }
			

2.5 Text wrapping around a positioned float

Two properties are used to specify how inline content and positioned floats interact. The 'flow-wrap' property applies to block or table elements, and specifies how poistioned floats impact inline content within those elements. Conversely, the 'wrap-type' property applies to positioned floats, and specifies how those positioned floats interact with inline content in block or table elements.

none

Positioned float elements that intersect the current element will not be respected in the inner flow of the element. Note that for block or table elements which have the 'overflow' property set to auto, scroll, or hidden, the flow-wrap value computes as 'none'.

wrap

Positioned float elements that intersect the current element will be respected in the inner flow of the element, and further propagated to any children of the element..

none

Do not wrap the outside content. Wrap only the inside content.

around

Wrap the outside content on all sides of the positioned float (see the example below).

left

Wrap the outside content on the left side of the positioned float.

right

Wrap the outside content on the right side of the positioned float.

top-bottom

Wrap the outside content on top and bottom of the positioned float.

  <style>
  #circle {
    wrap-shape: circle(50%, 50%, 30px);
    wrap-margin: 10px;
          }
  </style>
	
  <div id="circle">
    <img src="mycircle.png"/>
    </div>
  <div>Lorem ipsum</div>

  <style>
  #circle {
    background: url(mycircle.png);
    wrap-image: url(mycircle.png);
    wrap-margin: 10px;
          }
  </style>

  <div id="circle"></div>
  <div>Lorem ipsum</div>

2.6 Defining wrap shapes for floats

A positioned float's shape, which any surrounding text wraps around, and a positioned float's inner shape, which defines how any text inside the positioned float will be shaped, is defined by the wrap-shape property.

auto

The default value for wrap-shape, this value defines a rectangular shape for an element's border box, in keeping with the CSS box model. However, other specific types of elements may automatically receive different shapes based on intrinsic qualities. For example, an image with transparency might, under the "auto" property value, automatically have a non-rectangular shape defined based on the non-transparent sections of the image. Alternatively, an SVG element might have a non-rectangular shape automatically defined based on the shape of the SVG paths within the element. Specific details of this property are still to be determined.

<shape>

Shapes are used to describe the value of the wrap-shape property.

The shape can be defined using SVG style basic shapes as defined by the SVG Shapes. [SVG112]

All the lengths can be expressed in percentages and are defined in the coordinate space of the element. Percentages will take into account the element width/height excluding any padding or margins. The (x,y) coordinates are relative to the block's content box.

When defining a polygon area using percentages, the content box of the element must always be fully known in advance.

rect(x, y, width, height, [[rx], ry])

x, y, width and height

Define the bounding box of the rectangle

rx

For rounded rectangles, the x-axis radius of the ellipse used to round off the corners of the rectangle

ry

For rounded rectangles, the y-axis radius of the ellipse used to round off the corners of the rectangle

circle(cx, cy, r)

cx

The x-axis coordinate of the center of the circle

cy

The y-axis coordinate of the center of the circle

r

The radius of the circle. Note: Cannot be expressed as a percentage.

ellipse(cx, cy, rx, ry)

cx

The x-axis coordinate of the center of the ellipse

cy

The y-axis coordinate of the center of the ellipse

rx

The x-axis radius of the ellipse

ry

The y-axis radius of the ellipse

polygon([fillRule], x1, y1 x2, y2 x3, y3 ... xn, yn)

fillRule

The filling rule used to determine the interior of the polygon. See the fill-rule property in SVG for details. [SVG112] Possible values are nonzero or evenodd. Default value when omitted is nonzero.

xi

The x-axis coordinate of the i-th vertex of the polygon

yi

The y-axis coordinate of the i-th vertex of the polygon

If the polygon is not closed the user-agent will automatically add a new vertex at the end.

path([fillRule], ...)

fillRule

The filling rule used to determine the interior of the polygon. See the fill-rule property in SVG for details. [SVG112] Possible values are nonzero or evenodd. Default value when omitted is nonzero.

The content of the path() function will be parsed using SVG PathData notation.

<div id="circle" style="wrap-shape: circle(50%, 50%, 40px); width: 100px; height: 100px;"></div>
			

2.7 Defining shape using an image

Positioned float shape can be defined by specifying a source image whose alpha channel is used to compute the positioned float shape. As with other image elements, the same values for the 'background-image' property may be used with wrap-image. Furthermore, 'wrap-image-repeat', 'wrap-image-attachment', 'wrap-image-position', and 'wrap-image-size' are all possible properties to use in combination with wrap-image, and are equivalent to the ones available for the background property, as defined in CSS Background module [CSS3BG]. The properties apply only to the wrap-image.

The positioned float shape is computed to be the path that encloses the area where the opacity of the specified image is greater than the wrap-image-threshold value (see below). If the wrap-image-threshold is not specified, the default value to be considered is 50%.

Note: Images can also define cavities and text should wrap inside them. In order to avoid this, another positioned float element can be overlaid.

<style>
  #id {
    wrap-image: url(myimage.png);
      }
</style>
		

Defines the alpha channel threshold used to define the wrap-shape using an image. The default is 50%, meaning that all the pixels that are more than 50% transparent define the path of the positioned float shape.

<style>
  #id {
    wrap-image: url(myimage.png);
    wrap-image-threshold: 75%;
      }
</style>

The wrap-margin and wrap-padding properties can be used to further offset the inner or outer wrap shape from each other. Note that these properties only take non-negative values.

<style>
  #div2 {
    wrap-shape: poly(50px, 50px, 10px);
    wrap-margin: 10px;
    wrap-padding: 10px;
        }
</style>