Pro HTML5 and CSS3 Design Patterns

CHAPTER 8 ■ POSITIONING: INDENTED, OFFSET, AND ALIGNED

OffsetStatic cont.

Location This pattern applies to all static elements.^

Related to Offset Relative, Aligned Static Inline, Aligned and Offset Static Block; Sized, Shrinkwrapped

(Chapter 5); Static (Chapter 7); all offset design patterns in Chapter 9; Spacing, Inline

Spacer, Inline Decoration, Linebreak, Inline Horizontal Rule (Chapter 11); Vertical-offset

Content (Chapter 12); Block Horizontal Rule, Block Spacer, Block Space Remover (Chapter

13)

Offset or Indented Static Table

HTML

<h1>Offset or Indented Static Table</h1>

<div class="parent">

<table class="l-wrap"><tr><td>Left-offset Shrinkwrapped Table</td></tr></table>

<table class="r-wrap"><tr><td>Right-offset Shrinkwrapped Table</td></tr></table>

<table class="stretched"><tr><td>Indented Stretched Table</td></tr></table>

<table class="r-sized"><tr><td>Right-offset Sized Table</td></tr></table>

<table class="l-sized"><tr><td>Left-offset Sized Table</td></tr></table>

</div>

CSS

.l-wrap { width:auto; margin-left:60px; margin-right:auto; } .r-wrap { width:auto; margin-

left:auto; margin-right:60px;}

.stretched { width:80%; margin-left:auto; margin-right:auto; }

.r-sized { width:300px; margin-left:auto; margin-right:60px; text-align:right; } .l-sized {

width:300px; margin-left:60px; margin-right:auto; text-align:left; }

/* Nonessential rules are not shown. */