Position and Layout with CSS
This is Part III of a four-part unit:
- Part I -- Principles and Concepts Underlying CSS
- Part II -- Using CSS for Styling Your HTML
- Part III (this document) -- Using CSS for Positioning Document Elements
- Part IV -- Handling Browser Idiosyncracies
For years web designers used HTML tables to position elements of a web page where they wanted them. It worked after a fashion, but not well -- tables were intended for presenting data values in a table format, similar to a spreadsheet, NOT for positioning page elements. As monitor screens became larger and resolutions became finer, it became clear that HTML tables just weren't versatile enough for positioning. Changing one's browser resolution meant a good chance that the web page design would "break", as the designer had usually not accounted for all possibilities.
By reasonable use of the div and span HTML tags along with the id and class attributes, a web designer can set up the positioning of the components of a web page to account for almost any size or configuration that a user might want,
Readings on Positioning and Layout (by no means complete; this is just some of the most critical ideas)
General layout concepts
- Start with All About: CSS Positioning, Harnessing CSS Positioning: Part 1, and Harnessing CSS Positioning: Part 2
- In Search of the One True Layout -- STUDY THIS THOROUGHLY!
- Understanding CSS Positioning part 1, part 2, and part 3
- CSS Layouts: The Fixed. The Fluid. The Elastic.
Specific layouts and issues
- Two Column CSS Layout: The Absolute Basics
- How to create CSS layouts without using FLOAT
- The Incredible Em & Elastic Layouts with CSS — Jon Tan
- A List Apart: Articles: Conflicting Absolute Positions
- The Perfect Fluid Width Layout
- Lets Be Clear About This
- The Positive Side of Negative Margins
- Collapsing Margins
- Relatives - Who Needs Them ?
- CSS Floats - Repelling Content
Back to Part 2 -- Styling Your HTML
On to Part 4 -- Browser Issues
