CHAPTER 8 ■ POSITIONING: INDENTED, OFFSET, AND ALIGNEDOffset or Indented Static Table
Problem
You want to offset a shrinkwrapped or sized table in the normal flow, or you want to
indent a stretched table in the normal flow.Solution
You can offset a sized or shrinkwrapped table using left and right margins. You can
use a negative margin to move the table away from the center of its container, and
you can use a positive margin to move the table toward the center of its container.
When you assign a value to margin-left, you need to assign margin-right to auto,
and vice versa.
You can indent a stretched table equally on both sides by reducing its width to a
percentage less than 100% and setting the left and right margins to auto. This
creates a centered effect where both sides are indented equally. Because of browser
incompatibilities, and because you have to use width:100% to stretch a table to the
width of its container, there is no automatic way to indent left and right sides
unequally and keep the table stretched. On the other hand, because block elements
stretch automatically to the width of their container, you can indent the left and
right sides of a block unequally.
Unlike positioned elements, you can’t center a table and then offset it.HTML Pattern
| CONTENT |
CSS Patterns Left-offset Shrinkwrapped Static Table
SELECTOR { position:static; width:auto; margin-left:±VALUE; margin-
right:auto; }
Right-offset Shrinkwrapped Static Table
SELECTOR { position:static; width:auto; margin-left:auto; margin-
right:±VALUE; }
Offset Stretched Static Table
SELECTOR { position:static; width:100%; margin-left:auto; margin-
right:auto; }
Left-offset Sized Static Table
SELECTOR { position:static; width:+VALUE; margin-left:±VALUE; margin-
right:auto; }
Right-offset Sized Static Table
SELECTOR { position:static; width:+VALUE; margin-left:auto; margin-
right:±VALUE; }
Location This pattern applies to table elements.^
Limitations
Internet Explorer versions 6 and 7 have a bug that ignores margin-left when a
shrinkwrapped table is a child of any element besides <body>.Tips
Margins apply to the table element, but they do not apply to cells, rows, row groups,
columns, or column groups.Related to
Sized, Shrinkwrapped, Stretched (Chapter 5); Left Aligned, Right Aligned, Centered
Aligned (Chapter 9); Table (Chapter 15)