HTML and CSS Reference
In-Depth Information
first laid out according to the normal flow (affecting the elements relative to it) and then taken out of the flow of the
document, being absolutely positioned, typically to the left or right of its containing element.
Figure 9-2
A menu positioned relative and “in flow,” with a drop-down submenu positioned absolute, “out of flow.”
You already used the float positioning scheme in the preceding chapter, so now take a look at the normal flow and
how you can manipulate elements within that scheme.
display
Initial value:
inline
| Inherited: No | Applies to: All | CSS2.1
Browser support: IE 4+, Firefox 1+, Chrome 1+, Opera 7+, Safari 1+
The
display
property determines the type of box an element generates and has values such as
block
,
inline
,
inline-block
,
list-item
,
none
, and quite a few different values relating to the display of tables.
block
Most elements are given the declaration
display: block;
by a browser's default stylesheet. An element that is
a block—referred to as being block-level—doesn't have other block-level elements to the side of it, which, as shown
in Figure 9-1, is why elements only appear one after the other vertically rather than side by side.
By default, block-level elements usually have some white space around them, but this is something you removed
when adding the CSS Reset in Chapter 2 for better consistency across browsers.
Figure 9-3 shows two
<div>
elements, which are block-level and 100% wide by default.
