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
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.
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.
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
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