CSS Positioning
CSS Positioning
CSS 2.1 has three positioning schemes:
- Normal flow
- Absolute
- Float
Normal Flow Includes
- Block formatting of block boxes.
- Inline formatting of inline boxes.
- Relative positioning of block or inline boxes.
Block Formatting
- Boxes are laid out vertically.
- Vertical space between boxes determined by margins.
- Vertical margins between boxes are collapsed.
Inline Formatting
- Boxes are laid out horizontally.
- Horizontal margins are not collapsed.
- Inline boxes may be split across multiple lines if they will
not fit horizontally in their container.
Relative Positioning
- Boxes are laid out according to the normal flow.
- The box is shifted relative to its initial position.
- Offsetting a box only affects the position of descendant boxes.
Absolute Positioning
- Absolutely positioned boxes are removed from the document flow.
- Does not affect the position of other sibling elements.
- Creates new containing block for normal flow and absolutely positioned descendants.
- Contents do not flow around other boxes.
Absolute Positioning
- Positioned relative to the nearest positioned ancestor element.
- If no positioned ancestor element exists, the initial containing block is used.
- This is typically the browser view port.
Fixed Positioning
- Always positioned relative to the view port.
- Position does not change as the page is scrolled.
- Otherwise the same as absolute positioning.
Floats
A few things to keep in mind:
- Width should be specified to prevent floated boxes from
filling their container horizontally.
- Floated boxes are always treated like block boxes.
- Unlike block boxes, vertical margins are not collapsed.
Floats: A Visual Journey
Here is a basic normal flow with no elements floated:
Floats: A Visual Journey
Floated elements shift to the right or left on the current line:
The top of the floated object is aligned to the top of the current line box.
Floats: A Visual Journey
Floated elements are shifted until its outer edge meets the containing block edge...
Floats: A Visual Journey
...or until its outer edge meets the outer edge of another float.
Floats: A Visual Journey
Notice how the containing block does not grow to enclose the floated block...
Floats: A Visual Journey
...unless of course your name is Microsoft Internet Explorer for Windows:
(Previous image rendered in Firefox, current image rendered in Internet Explorer 6).
Floats: A Visual Journey
If there is not enough horizontal space, floated boxes are shifted down until there is room, or there are no more floats.
Floats: A Visual Journey
Line boxes flow around floated boxes on the opposite side to which the box is floated.
Floats: A Visual Journey
- Block boxes can "clear" floated boxes.
- Block boxes can clear left, right or both sides.
- If the clear property is set, a box will be pushed downward until
the specified side is no longer adjecent to a floated box.
div { clear: left; }
Floats: A Visual Journey
A box with no clear property:
Floats: A Visual Journey
The same box with a clear value of left.
