CHAPTER 8 ■ POSITIONING: INDENTED, OFFSET, AND ALIGNEDOffset Float
Problem You want to control the spacing between floats by moving them closer
together or further apart.
Solution A float’s margins work just like static inline elements and blocks. Positive
margins push content and other floats away, and negative margins bring them
closer. Large enough negative margins can cause floats to overlap with each
other and with neighboring inline content.
Thus, floats exist in their own flow where the position of one float affects the
position of neighboring floats and inline content. Contrast this with absolute
and fixed elements, where each one is positioned independently.
Margins offset floats rather than indent them because they don’t change their
size, they change their position.
Horizontal Patterns Left-extended Float^
SELECTOR { float:LEFT_OR_RIGHT; margin-left:+VALUE; }
Left-retracted Float
SELECTOR { float:LEFT_OR_RIGHT; margin-left:-VALUE; }Right-extended Float
SELECTOR { float:LEFT_OR_RIGHT; margin-right:+VALUE; }Right-retracted Float
SELECTOR { float:LEFT_OR_RIGHT; margin-right:-VALUE; }Vertical Patterns Top-extended Float
SELECTOR { float:LEFT_OR_RIGHT; margin-top:+VALUE; }
Top-retracted Float
SELECTOR { float:LEFT_OR_RIGHT; margin-top:-VALUE; }Bottom-extended Float
SELECTOR { float:LEFT_OR_RIGHT; margin-bottom:+VALUE; }Bottom-retracted Float
SELECTOR { float:LEFT_OR_RIGHT; margin-bottom:-VALUE; }Location This pattern applies to all elements.
Advantages Floats can create versatile layouts. These layouts easily reflow to fit displays of
all sizes.
Disadvantages Floats tend to trigger browser bugs in all browsers.
Tips Stacking floats to the left or right aligns floats, and extending or retracting
margins fine-tunes their position.
Related to Float and Clear (Chapter 7); Outside-in Box, Floating Section, Float Divider,
Fluid Layout, Opposing Floats (Chapter 17); Floating Dropcap, Floating
Graphic Dropcap (Chapter 18); Left Floating Callout, Right Floating Callout
(Chapter 19); Floating Alert (Chapter 20)