Agenda
- Session 9 Review
- CSS for Positioning
- Baseline
- Important about Margin
- Float
- Right, Left, no center
- Clearing
- Shrink wrapping
- Using Floats within content
- Using Float in Layout
- Three Columns with Floats
- Spacing out your nav
- Position
Readings
- Chapter 15, 16, & 17
- Opera Web Standards Curriculum
Homework
Portfolio Re-organize
Let’s do a mini spiff up of our portfolio’s. Reorganize your portfolio using the div structure we have discussed. Include a header, navigation, content, and footer section. You may do some minimal styling, font-size, color, some borders, etc. If you feel comfortable with Photoshop or Fireworks you may continue and begin using graphics.
Article: None
No article.
Resources
Float
- CSS Tricks All about Floats Screencast
- Position Is Everything
- Quirksmode Bug Reports
- css-discuss Wiki
- CSS Hacks at css-discuss
- Browser bugs at css-discuss
- Web Standards Group
- IE5/Mac Bugs and Fixes
- Float behavior in CSS2.1 Recommendation
- More CSS2.1 float behavior
Page Layout with CSS
- Elastic Designs article at A List Apart
- Elastic designs at HTML Dog
- Elastic Lawn design by Patrick Griffiths at CSS Zen Garden
- The Zoom Layout Page
- Zoom Layout presentation at @media 2005
- Big, Stark, and Chunky, article at A List Apart
- On Fixed vs. Liquid Design, by Doug Bowman
- More on fixed widths, by Richard Rutter
- Fixed Fashion, by Jeremy Keith
- Three-column layout tutorials at css-discuss
- Two-column layout tutorials at css-discuss
- Creating Liquid Layouts with Negative Margins (A List Apart), by Ryan Brill
- In Search of the Holy Grail (A List Apart), by Matthew Levine
- In Search of the One True Layout (Position is Everything), by Alex Robinson
- 3 Column All CSS Layout, by Ben Hirsch, published on the Shadow Fox Network