Skip to: content, navigation

by Tommy Olsson and Paul O’Brien

The Relationship Between display, position, and float

The three properties display, float, and position interact in certain ways.

If an element’s display property is set to none, no box is generated. In this case, float and position are ignored.

If an element’s position property is set to absolute or fixed, it’s absolutely positioned. In this case, float is ignored (the computed value is none).

For absolutely positioned elements, floated elements (elements whose float property is set to left or right), and the root element, the computed value for display is set according to Computed Display Values.

Otherwise, the computed value for display is the same as the specified value.

Table 1. Computed Display Values
Specified Value Computed Value
inline, inline-block, run-in, table-caption, table-cell, table-column, table-column-group, table-footer-group, table-header-group, table-row, or table-row-group block
inline-table, table
other as specified

User-contributed notes

ID:
#1
Date:
Thu, 31 Jan 2008 23:20:59 GMT
Contributed by:
mattymcg
Status:
This note has not yet been confirmed for accuracy and relevance.

The value "inline-table" should have no comma after it.

Add a note

To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.

Related Products

The Principles of Beautiful Web Design

Best Seller!

You don’t need to go to Art School to design great looking web sites!

Book Cover: The Principles of Beautiful Web Design

Download the FREE sample chapters