Pro HTML5 and CSS3 Design Patterns

CHAPTER 1 DESIGN PATTERNS: MAKING CSS EASY!

CSS Properties and Values: Layout

Float applies to all except cells and rows.

float: none, left, right

Clear applies to all except inlines, inline-blocks, cells, & rows.

clear: none, left, right, both

Positioned applies to all except cells and rows.

position: static, relative; absolute, fixed

left: auto, LENGTH, %WidthOfContainingBlock

right: auto, LENGTH, %WidthOfContainingBlock

top: auto, LENGTH, %HeightOfContainingBlock

bottom: auto, LENGTH, %HeightOfContainingBlock

z-index: auto, INTEGER

Horizontal Margin applies to all except cells and rows.

margin: 0 , LENGTH, %WidthOfContainingBlock, auto

margin-left: 0 , LENGTH, %WidthOfContainingBlock, auto

margin-right: 0 , LENGTH, %WidthOfContainingBlock, auto

Vertical Margin applies to all except inlines, cells, and rows.

margin: 0 , LENGTH, %WidthOfContainingBlock, auto

margin-top: 0 , LENGTH, %WidthOfContainingBlock, auto

margin-bottom: 0 , LENGTH, %WidthOfContainingBlock, auto

Width applies to all except inlines and rows.

width: auto, LENGTH, %WidthOfContainingBlock

min-width: 0 , LENGTH, %WidthOfContainingBlock

max-width: none, LENGTH, %WidthOfContainingBlock

Height applies to all except inlines and tables.

height: auto, LENGTH, %HeightOfContainingBlock

min-height: 0 , LENGTH, %HeightOfContainingBlock

max-height: none, LENGTH, %HeightOfContainingBlock

Content Layout applies to all except inlines, tables, and rows.

i text-indent: 0 , LENGTH, %WidthOfContainingBlock

i text-align: left, center, right, justify

overflow: visible, hidden, auto, scroll