Pro HTML5 and CSS3 Design Patterns

CHAPTER 20 ■ ALERTS

Floating Alert

Problem You want to insert a floating alert into your document.

Solution You can use the Alert design pattern to mark up the alert. You can use the Float and Clear
design pattern (Chapter 7) to float the alert. You can use the Opposing Floats design pattern
(Chapter 17) to float the alert’s heading to the left and its paragraph to the right.

Pattern^

HTML

CSS .alert { float:LEFT_OR_RIGHT; width:+VALUE; margin:+VALUE; }^
.alert h3 { float:left; width:+VALUE; margin:+VALUE; }
*.alert p { float:right; width:+VALUE; margin:+VALUE; }

Location This pattern works anywhere you can float a block element.

Advantages The browser automatically calculates the positions of floats, dynamically sizes their height,
and dynamically moves text and other floats out of the way. When the display is narrow,
floats get pushed down. This makes the layout very flexible and adaptive to the user’s
environment. It is easy to control the general position of a float by floating it left or right and
by placing margins around it. If you need finer control, you can also relatively position a
float and offset it using left, right, bottom, and top.

Disadvantages The main disadvantage to this design pattern is that you cannot float the heading and
paragraph without floating the division as well. The browser removes floats from the normal
flow. If you float a child, you also have to float its parent if you want to keep them together.
Floats trigger bugs in browsers and are not well supported in minor browsers. It is difficult
to control the precise position of a float. Its vertical position is roughly located at its
nonfloated vertical position in the flow. Its horizontal position is the inner-left or inner-
right side of its parent’s container, or stacked next to or below a previously floated element.

Example In the example, I used the selector *.alert.note to turn the text and borders blue when the
class of the alert is note. I also inserted the Inline Decoration design pattern (Chapter 11)
into the heading to give it more emphasis. In this case, the inline decoration consists of the
  styled with a gold left border.

Options You can easily float an inline alert following these same techniques.

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; Float and Clear (Chapter 7); Offset Float (Chapter 8); Inline Decoration
(Chapter 11); Opposing Floats (Chapter 17)