CSS Layout Tutorial

By Xah Lee. Date: . Last updated: .

This page shows the features of CSS that can be used for layout.

Emulating HTML Table Tab for Layout

CSS can emulate the <table> tag. So, traditional layout using the table tag can be done with pure CSS. See: CSS Table (Tableless Table).

Flow Around Blocks

The float property can make text flow around a image. See: CSS Text Flow Around Image.

In general, the float property makes elements flow around another, as to avoid collision. When multiple consecutive items all have “float”, it makes the items flow from left to right (or right to left), in the same way a sequence of image tags <img> would flow.

Visual formatting model#propdef-float

CSS position

CSS has a position property that can be used to:

See: CSS Position: static, relative, fixed, absolute.

For examples of using a separate layer, see:

「visibility:hidden」 and 「display:none」

A element can be hidden from view with visibility:hidden, or its default visibility:visible.

When a tag has visibility:hidden, it is not shown, however, it still occupies the same space.

To hide a element and also take out its space, as if it doesn't exist, use display:none.

These are useful especially when used together with JavaScript. For example, for implementing pure horizontal menus, collapsible lists (like Windows folder tree), tabbed menu [see CSS: Tabbed Menu], Tooltip. [see JS: How to Create Tooltip]

Liket it? Put $1 at patreon.

Or, Buy JavaScript in Depth