Positioning, floats & columns

position

Chooses the positioning scheme for a box: whether it stays in normal flow, and what the inset properties (top, left, inset and so on) measure from.

Any value other than static makes the box a containing block for absolutely positioned descendants. sticky arrived later: Chrome 56 · Firefox 32 · Safari 13.

top, right, bottom, left

The distance of a positioned box's edge from the matching edge of its containing block (or, for relative, how far to shift the box from where it would have been). anchor() and anchor-size() let the value refer to an anchor element; see Values & references.

When both opposite insets are set on an absolutely positioned box with an auto size, the box stretches between them.

inset

Shorthand for top, right, bottom and left, taking one to four values in the same order as margin.

position: absolute;
inset: 0;

z-index

The stacking order of a positioned box within its stacking context: higher values paint in front of lower ones. An integer value also makes the box start a new stacking context, so its descendants are stacked inside it and cannot rise above its siblings.

z-index also works on flex items and grid items, even when they are not positioned.

float

Moves a box to one side of its container and lets inline content, such as text, wrap round the other side. Floats have no effect on absolutely positioned boxes or on flex and grid items.

Browsers support left, right and none, and the flow-relative inline-start and inline-end (Chrome 118 · Firefox 55 · Safari 15). The other values in the grammar belong to page floats, which no browser ships. A container with display: flow-root grows to contain its floats.

clear

Moves a box down below any earlier floats on the given side, so it starts on a clear line.

Browsers support left, right, both and none, and the flow-relative inline-start and inline-end (Chrome 118 · Firefox 55 · Safari 15).

shape-outside

Gives a float a non-rectangular outline for text to wrap round: a basic shape such as circle() or polygon(), one of the float's boxes, or the opaque parts of an image. The float itself still paints as a rectangle; combine it with clip-path to cut the visible shape too.

.portrait {
  float: left;
  shape-outside: circle(50%);
  shape-margin: 1rem;
}

The shape functions are listed under Shapes & images.

shape-margin

Adds space round the shape set by shape-outside, pushing wrapping text further away from it.

shape-image-threshold

When shape-outside is an image, sets the alpha level that counts as part of the shape: pixels more opaque than the threshold are inside it. 0.5 ignores pixels that are half transparent or less.

An <opacity-value> is a number or a percentage, clamped to the range 0 to 1.

columns

Shorthand for column-width and column-count, with an optional column-height after a slash. Setting either the width or the count makes the box a multi-column container. The gap and rule between columns are set with column-gap and column-rule.

columns: 18rem 3;

The / column-height part is newer: Chrome 145 · Firefox no · Safari no.

column-count

The number of columns. With a column-width as well, it is the maximum number.

column-width

The ideal width of each column. The browser fits as many columns of at least this width as the container allows, then widens them to share out the leftover space.

column-fill

How content is shared between columns when the container's height is constrained. balance evens out the content so the columns end at about the same height; auto fills each column in turn, which can leave the last ones short or empty.

column-span

Lets an element inside a multi-column container break out and span every column, such as a heading across the top of an article. Browsers support none and all.

article h2 { column-span: all; }

column-height

A fixed height for each column. Content that does not fit in one row of columns can then wrap into a new row of columns below, as set by column-wrap.

column-wrap

Whether extra content goes into a new row of columns below the first (wrap) or into further columns that overflow in the inline direction (nowrap). auto wraps only when column-height is set.

break-before, break-after

Asks for, or tries to avoid, a page or column break before or after a box, in printed output and in multi-column layout.

Support for the individual values varies: Firefox has no column values and no avoid values, and Safari does not support avoid.

h2 { break-before: page; }

break-inside

Tries to keep a box in one piece rather than splitting it across pages or columns. Useful for figures, cards and table rows.

.card { break-inside: avoid; }

orphans, widows

The fewest lines of a paragraph that may be left alone at the bottom of a page or column (orphans) or carried over to the top of the next one (widows). If a break would leave fewer, the break moves.

box-decoration-break

What happens to a box's borders, padding, background and shadow when it is split across lines, columns or pages. slice cuts the box as if it were one long piece; clone gives each fragment its own full set, so a highlighted inline span wrapping onto two lines gets rounded ends on both.

page

Names the type of page a box should be printed on, so that an @page rule with that name can style it. When the value changes between neighbouring boxes, a page break is forced between them.

Class A break points are the places between sibling block-level boxes. A box with page: auto uses the page of its parent.

@page wide { size: landscape; }
table.big { page: wide; }

page-break-before, page-break-after Deprecated

The CSS 2 page-break properties. Browsers now treat them as aliases of break-before and break-after, with always meaning page. Use break-before and break-after instead.

page-break-inside Deprecated

The CSS 2 property for avoiding a page break inside a box, now treated as an alias of break-inside. Use break-inside instead.