Pro HTML5 and CSS3 Design Patterns

CHAPTER 20 ■ ALERTS

Right Marginal Alert

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

Solution You need to create a wide margin on the right in which to put the alert. You can use the Alert design
pattern to mark up the alert. You can use the Right Marginal design pattern to move the alert into
the right margin. You can use the Offset Absolute and Offset Fixed design pattern (Chapter 8) to
vertically position the alert and the Right 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; padding-right:MARGIN; }^
.alert { position:absolute; width:A_WIDTH; right:0;
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 padding-right:MARGIN to create a right “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.
Use right:0 to move the alert into the “margin” of the main block.
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 right padding.^

Advantages You have complete control over the positioning of the alert. Also, the alert is placed within the
border of its parent. See Left Marginal Alert to place the alert outside 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, Left Marginal Alert; Offset Absolute and Offset Fixed (Chapter 8); Left Offset, Right
Aligned, Top Offset (Chapter 9); Inline Decoration (Chapter 11); Right Marginal (Chapter 13)