CSS Layout Tutorial
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:
- Adjust position of elements.
- Make elements into a separate layer. This is a very powerful feature, and is used to create effects such as drop-down menus, or tool-tip balloon-style boxes.
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〕