float-offset property CSS Reference

Definition and Usage

This property pushes floated elements in the opposite direction of the where they have been floated with 'float'. If one value is specified, it is the horizontal offset. If two values are specified, the first is the horizontal and the second is the vertical offset. If an element has only been floated horizontally (e.g., by setting 'float: right'), this property will only offset the float horizontally, even if a vertical value also has been specified. Likewise, if an element has only been floated vertically, this property will only offset the float vertically. If an element has been floated both horizontally and vertically, this property will offset both horizontally and vertically. If no vertical value has been specified, the vertical offset is set to zero.

Name: float-offset
Value: <length> <length> ?
Initial: 0 0
Applies to: floated elements
Inherited: no
Percentages: refer to width and height of containing block
Media: visual, paged
Computed value: one or two absolute lengths


float-offset: <length> <length> ?


Negative values are allowed; a negative values will push the float in the same direction as it has been floated with 'float'

The float will never be pushed outside the content edges of the multicol element due to a setting on 'float-offset'.

Percentage values refer to the width/height of the float plus a fraction of the column gap.

Floats that are moved into other columns with this property intrudes.


div.quote {
    float: top left multicol;
    float-offset: 2.5gr;
    width: 1gr;
img {
    float: top left multicol;
    float-offset: 1.5gr 50%;
    width: 8em;

Relative articles