CSS Layouts and Positioning Basics, and Basic Techniques

Box Lessonsby Owen Briggs. These are among the best resources for working with CSS-P boxes in a variety of layouts, with workarounds and templates included. [Tutorial dated 2001, by Owen Briggs, thenoodleincident.com]

CSS PositioningVery well done tutorial at Brainjar.com that provides “an overview of the methods and rules that govern visual rendering in the CSS2 specification. It also points out some things to watch out for.” Good examples along the way, and easy to understand. [Tutorial updated 2004. By Mike Hall, brainjar.com. Hat tip: rudy limeback via thelist]

Introduction to CSS LayoutLearn how to use CSS for layouts, why it can make a positive difference compared to tables, and how to use CSS cross-browser, cross-platform. Excellent tutorial. [Article dated 03/01/2002. By Eric Costello and Apple Developer Connection]

Designing for Two Stylesheetsby Rachel Andrew, edgeofmyseat.com. Good tutorial that provides the code and instructions for how to create a basic 2-column design with CSS positioning for newer browsers, a more simple style sheet for older browsers, then provide a simple JavaScript sniffer code. [Tutorial dated 04/01/2002 by Rachel Andrew, edgeofmyseat.com.]

Faux Absolute Positioning “There are two popular approaches to positioning with CSS: float and absolute positioning. Both approaches have their pros and cons. My teammates and I have developed a new positioning approach that gives us the best of both worlds. After quite a bit of experimenting and testing, it's time to share the technique with the rest of the world and see how we can work together to improve it. Iím calling it 'faux absolute positioning' after the faux columns technique that simulates the presence of a column.” [Article/tutorial dated 06/17/2008, by Eric Sol, for A List Apart.]

Simple 2 column CSS layout Step-by-step tutorial with all the CSS and instructions on how to create a simple layout with a header, two columns, and a footer, including allowing for various browsers. [Article/tutorial last updated 08/24/2006, by Roger Johansson, 456 Berea Street.]

Building a Dynamic Banner with CSS Sprites Easy to follow 4-part article on creating a banner or advertising banner using the CSS sprites approach. Topics: Building a Dynamic Banner with CSS Sprites, Building a banner the classic way, Rebuilding the dynamic banner as a two-image CSS sprite, Listing the complete source code for the banner. [Article/tutorial dated 02/19/2007, by Alejandro Gervasio, for Developer Shed.]

In search of the One True Layout This tutorial series explains and provides a step-by-step process for total layout flexibility - “the ability to order columns logically in the source while displaying them in any order desired. For any number of columns,” equal height columns if desired, vertical placement of elements across grids/columns, and more. Details are broken down into individual tutorials with examples. Pros and cons are explained, along with alternative possibilities. Well done, must-read tutorial series. [Article/tutorial dated 10/21/2005, updated 04/25/2006, by Alex Robinson, for Position is Everything .]

Dynamic Layouts and CSS Positioning

Dynamic Resolution-Dependent LayoutsA tutorial on how to create a layout with CSS that can change based on the size of the browser window. His approach uses several CSS files (default, thin, wide, wider) and some JavaScript. As Kevin states that a dynamic resolution-dependent layout “provides a strong alternative for those trying to find a balance between fluid and fixed layouts. With dynamic layouts, the possibilities really are quite endless. You can change 3-column layouts to 2-column layouts, provide appropriate font-sizes to increase legibility, and even reward higher resolution viewers with extra content and larger images.” You can check out the demo at his site, read the tutorial, download the files to try yourself. Be sure to read the discussion about it within the Comments at the end of the tutorial, as you'll find pros and cons, links to other approaches and implementations, and more. [Tutorial dated 11/16/2005, by Kevin Hale particletree.]

Resolution-Dependent LayoutInteresting possibilities here with CSS and JavaScript to switch layouts depending on the user's browser width. Be sure to follow the discussion comments to follow, too, that contain pros and cons, links to other approaches, etc. [Article dated 09/21/2004, by Cameron Adams, The Man in Blue.]

Flexible or Liquid Layouts with CSS

Flexible Layouts with CSS PositioningTwo techniques for creating a flexible layout with CSS positioning. Explains his thinking process through figuring out how and why to use CSS for different approaches, allowing for browser bugs, etc. Code and examples included. [Tutorial dated 11/15/2002, by Dug Falby, for A List Apart. hat tip: Neill Harmer via css-discuss]

Forms Layouts using CSS Positioning

Accessible CSS Forms: Using CSS to Create a Two-Column Layout As the author states, “Websites have become less accessible and more complex over time according to recent studies. Learn how to buck the trend by creating fast, accessible CSS forms that work with modern browsers and gracefully degrade.” Well done tutorial with plenty of examples and insightful comments discussion, too. Great tutorial on how create accessible forms using CSS for layout. Cross-browser, cross-platform tested, too. [Article/tutorial dated 03/30/2006, by Andy King, for WebSiteOptimization.com.]

Fancy Form Design Using CSS This step-by-step tutorial provides instructions, plenty of screenshots, and all the HTML and CSS to style 2-column forms with CSS, CSS positioning. A variety of layout possibilities are covered here, too. Includes information on cross-browser CSS issues, including IE's problems with the legend element. Terrific tutorial. You can also download the entire tutorial in PDF format. This tutorial is also a chapter excerpt from The Art and Science of CSS(link to amazon.com informtion). [Article/tutorial dated 05/30/2007, by Cameron Adams, for SitePoint.]