Topics

Fighting Divitis

• Use the tags (X)HTML provides (like <ul>, <table>, <h1>, etc.)
• Don't add a <div> just to set a class or id

CSS Positioning

• position: relative toggle
  • element positioned relative to normal placement in flow
  • element officially occupies original placement
• position: absolute toggle
  • element positioned relative to relatively positioned ancestor
  • takes element out of normal flow
• position: fixed toggle
  • element positioned relative to viewport
  • viewport, not some DOM ancestor!
  • takes element out of normal flow
• z-index property
• float: left or right toggle
  • elements floats to edge of its containing box or another floated box
  • element taken out of normal flow
  • multiple floated elements collect horizontally and "wrap" around when necessary
• clear: none or left or right or both toggle
  • place all specified floating elements first
  • then continue placing elements

Layout Types

• floating: use float property to float columns
• setting dimensions toggle
  • fixed-width: set dimensions in pixels
  • liquid: set dimensions in percentages—browser width
  • elastic: set dimensions in ems—relative to font size
  • elastic-liquid: set widths in ems, maximum widths in percentages

Floating Layout

• two columns toggle
  • float columns
  • columns have fixed width
  • footer should clear floats
• three columns toggle
  • recursive two-column floating layout
• Choose your dimension type