Pro HTML5 and CSS3 Design Patterns

CHAPTER 20 ■ ALERTS

Left Marginal Alert

Problem You want to insert an alert into the left margin of your document.

Solution You need to create a wide margin on the left in which to put the alert. You can use the Alert design
pattern to mark up the alert. You can use the Left Marginal design pattern (Chapter 13) to move the
alert into the margin. You can use the Offset Absolute and Offset Fixed design pattern (Chapter 8) to
vertically position the alert and the Left Aligned design pattern (Chapter 9) to horizontally position
the alert. You can use the Left Offset and Top Offset design patterns (Chapter 9) to position the
heading and the paragraph.

Pattern

HTML

<div class="main">

<div class="alert TYPE">

<h3> ALERT HEADING </h3>

<p> ALERT TEXT </p>

</div>

</div>

CSS .main { position:relative; margin-left:MARGIN; }^
.alert { position:absolute; width:+A_WIDTH; left:-A_WIDTH;
height:+VALUE; }
.alert h3 { position:absolute; left:0; top:TOP_OFFSET;
margin:0; }
.alert p { position:absolute; left:+VALUE top:TOP_OFFSET;
margin:0; }

Use margin-left:MARGIN to create a left margin in the main block element that contains the alert,
and use position relative to position it.
Set the alert, its heading, and its paragraph to position:absolute.
Set width:A_WIDTH to less than MARGIN so the alert will fit in the margin.
Optionally set height:+VALUE to the height you want the alert to be. This is necessary only if you are
using border-bottom to render a bottom border.
Move the alert into the margin by setting left to the negative of A_WIDTH.
Use left:0 to move the heading to the left side of the alert.
Use left:+VALUE to offset the paragraph to the right of the heading.
Use top:TOP_OFFSET to offset the top of the heading and paragraph from the top of the alert.
Use margin:0 to clear the default heading and paragraph margins.
Note that the paragraph defaults to width:auto, which automatically sizes the paragraph to fit
within the width of the alert.

Location This pattern works anywhere you have a wide left margin.^

Advantages
You have complete control over the positioning of the alert. Also, the alert is placed outside the
border of its parent. See Right Marginal Alert to place the alert inside the border.

Disadvantages You need to ensure there is enough vertical space between marginal elements to prevent them from
overlapping. Absolute positioning does not adapt as well to various devices as does the Fluid Layout
design pattern (Chapter 17).

Tip You can build prettier alerts by using rounded corners with border-radius or shadow effects, as
described in Chapter 6.

Related to Alert, Inline Alert, Right Marginal Alert; Offset Absolute and Offset Fixed (Chapter 8); Left Aligned, Left
Offset, Top Offset (Chapter 9); Inline Decoration (Chapter 11); Left Marginal (Chapter 13)