Pro HTML5 and CSS3 Design Patterns

CHAPTER 13 ■ BLOCKS

Left Marginal

Problem

You want to excerpt elements out of the normal flow and move them into the left margin.

These elements could contain headers, notes, tips, alerts, comments, images, and so on.

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

the flow. You do not mind using fixed widths.

Solution

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

remove elements from the normal flow into the margin.

You can mark up a block element with the left-marginal class to make it easy to select.

You can indent it using margin-left. You can set it to position:relative,

position:absolute, or position:fixed so its children can be positioned relative to its

margin. You can use margin-right:auto and width to fix the width of the block so that

content does not reflow when the viewport resizes. Reflow may change the vertical location

of marginal elements, which could cause them to overlap.

You can mark up a marginal element with a class that describes its purpose, such as

marginal-header, marginal-note, and so forth. You can use position:absolute to remove

the element from the flow, and you can use a negative value in left to move it into the left

margin. You can use margin-top to move the element up or down. You can use width to size

the element to fit into the width of the margin.

Pattern^

HTML ^

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

Location This pattern works on any element.

Caution

The layout created by this pattern does not protect elements from overlapping in the

margin. It is easy to move an element into the margin and have it overlap other elements in

the margin. Also, a browser that does not support absolute positioning renders marginal

text inline where it occurs.

Tips

You can combine this pattern with Right Marginal.

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

out any element and move it into the margin.

Related to

Right Marginal; Box Model (Chapter 4); Margin (Chapter 6); Positioning Models, Positioned,

Closest Positioned Ancestor, Absolute, Relative (Chapter 7); Offset Absolute and Offset Fixed

(Chapter 8); Marginal Dropcap, Marginal Graphic Dropcap (Chapter 18); Left Marginal

Callout (Chapter 19); Left Marginal Alert (Chapter 20)