Pro HTML5 and CSS3 Design Patterns

CHAPTER 19 ■ CALLOUTS AND QUOTES

Left Marginal Callout

Problem

You want to excerpt text out of the normal flow and move it into the left margin as a callout.

You want items in the margin to be positioned vertically where they would have been in the

flow. You do not mind using fixed widths. You do not use many callouts, so the risk of

overlap is minimal.

Solution

You can indent text to create a margin on the left and then use absolute positioning to

remove content from the normal flow into the margin.

You can use margin-left to indent the terminal block. You can use position:relative to

position the block so its inline children can be positioned relative to its margin. You can use

margin-right:auto and width to fix the width of the terminal block so that the content does

not reflow. Without a fixed width, content reflows when the viewport resizes, and reflow

may change the vertical location of callouts, causing them to overlap.

You can assign an inline element to the callout class. You can use position:absolute to

remove the inline element from the flow. You can use width to size the inline element to fit

into the margin. You can assign a negative value to left to move the inline element into the

left margin. You can use margin-top to move the inline element up or down.

Pattern^

HTML ^
TEXT

CSS .left-marginal { position:relative; width:+VALUE;^
margin-left:+VALUE; margin-right:auto; }
.callout { position:absolute;
left:-VALUE;
width:+VALUE;
margin-top:±VALUE; }

Location This pattern works only on inline elements inside terminal block elements.

Caution

The layout created by this pattern does not protect content from overlapping. It is very easy

to move callouts into the margin and to have them overlap each other and other content

moved into the margin.

Tips

A callout should be positioned in the text where it makes sense if it were read as part of the

text.

You can combine this pattern with Right Marginal Callout.

This pattern is visually similar to HTML tables, but the markup is more flexible. You can pull

out any inline content and move it into the margin.

Related to Right Marginal Callout; Left Marginal (Chapter 13)