- You are here:
- WebsiteTips Home
- Web Site Resources
- Markup, Code
- CSS
- CSS Tutorials
- CSS Layouts, Positioning
CSS - Cascading Style Sheets
CSS Tutorials, Articles, and Tips, Page 2
Layouts with CSS, CSS Positioning
The CSS Articles and Tutorials section below has links to helpful CSS tutorials on creating layouts with CSS, CSS positioning, using CSS2, and related tutorials and tips on Web page layouts using CSS.
Within the other CSS Articles and Tutorials pages you'll find CSS articles and general CSS tutorials, CSS menus, navigation, and styling lists, and tutorials on centering with CSS, style sheets for print, how to use CSS shorthand properties, styling links with CSS, and more.
IE7 CSS Hacks, IE8 CSS Bugs, Bug Fixes, Solutions: Wondering what to expect with CSS and Internet Explorer 8? Want some information about conditional comments? Looking for IE7 CSS hacks? Going nuts with a browser problem with your CSS? Check out Solutions to CSS Browser Bugs, CSS Bug Fixes, and Cross-Browser, Cross-Platform CSS Issues.
On this page:
- CSS Layouts and Positioning Basics, and Basic Techniques
- Beyond the Basics: CSS Positioning Techniques, CSS Layout Technique
- CSS Floats and Positioning
- Dynamic Layouts and CSS Positioning
- Flexible or Liquid Layouts with CSS
- Forms Layouts using CSS Positioning
Also within CSS Tutorials:
- CSS Articles and General CSS Tutorials
- Lists, Menus, Navigation, and Rollovers with CSS
- CSS Fonts, CSS Typography
- Print-Friendly Web Pages and CSS
- Centering, Links, Scrollbars, Style Switching, Media Types, Selectors, CSS Shorthand
Also within CSS - Cascading Style Sheets:
- CSS - Cascading Style Sheets Home
- W3C CSS Recommendations, Working Drafts, and Tutorials (1 page)
- Solutions to CSS-Related Browser Bugs, CSS Bug Fixes, Cross-Browser, Cross-Platform CSS Issues (1 page)
- CSS Sites, Resources, and Books (1 page)
- CSS Templates (1 page)
- CSS Tools - Editors, Reference Charts, Validators, and More (1 page)
- CSS Discussion Lists, Newsgroups (1 page)
CSS Layouts and Positioning Basics, and Basic Techniques
See also Solutions to CSS-Related Browser Bugs and Cross-Browser, Cross-Platform Issues. The CSS Templates section has some CSS positioned layout templates to use and learn from, too.
- Box Lessons
by 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 An Introduction - Part Six: The Basics of Positioning
An introduction to positioning page elements with CSS, including the use of margins, and the positional properties ofabsolute,relative, andstatic. [Tutorial dated 2004. By Adrian Senior, for CommunityMX.] - CSS Positioning
Very 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 Layout
Learn 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 Stylesheets
by 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:floatand 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.] - Page Layout with CSS Positioning
by Westciv. Excellent tutorial that explains various CSS positioning:static,absolute,fixed,relative; CSS elements, properties, more. [Tutorial by Westciv.com] - 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.]
Beyond the Basics: CSS Positioning Techniques, CSS Layout Techniques
See also Solutions to CSS-Related Browser Bugs and Cross-Browser, Cross-Platform Issues. The CSS Templates section has some CSS positioned layout templates to use and learn from, too.
Books on CSS
Recommended by WebsiteTips.com
See more CSS books, read reviews, why we recommend each book
In association with 
- 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.] - CSS Sprites: How to Create CSS Sprites for Blog Icons, Web Site Icons
By Shirley Kaiser, SKDesigns. Combine all those blog icons or Web site icons into 1 single image and use CSS positioning to display them all where needed. Your pages will load faster since you'll save bandwidth, HTTP requests, and more. Learn how in this CSS sprites tutorial.
For more on CSS sprites, see “Sprites” Method of HTML Lists and CSS. [Article dated 10/04/2007 by Shirley Kaiser, SKDesigns via WebsiteTips.com's CSS Tutorials.] - How to style a restaurant menu with CSS
An easy-to-understand tutorial that explains how to create a restaurant menu using CSS - incredibly easy and works beautifully. [Tutorial dated 07/12/2006, by Alessandro, for Web Graphics (web-graphics.com).] - 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 .] - Making Positioned Elements Obey the Flow - Part One
Auto-positioning, CSSautoproperty,topproperty,leftproperty,relativeproperty,rightandbottomproperties, IE7 bugs and possible solutions, too. [Article/tutorial dated 05/27/2007, by John Gallant, Holly Bergevin, for Community MX.] - Multi-Unit Any-Order Columns
Commentary, thoughts, and CSS possibilities from Alex Robinson's In search of the One True Layout (via Position is Everything). [Article/tutorial dated 11/09/2005, by Eric Meyer meyerweb.]
CSS Floats and Positioning
- Clearing Floats
Instead of adding an extra element withclear: both, a common way to clear floated elements, here's a cleaner approach using only CSS (no added markup to your webpage). Usesoverflow: autooroverflow: hidden. Tutorial explains it all, provides examples, etc. [Article/tutorial dated 07/2005, by Peter-Paul Koch, quirksmode.org.] - Containing Floats
Fantastic article that explains in easy-to-understand language how CSS floats work. Fabulous graphics examples, markup examples, too.[Article/tutorial dated 08/23/2003, by Eric Meyer, for Complex Spiral Consulting.] - Simple Clearing of Floats
How the use ofoverflow:autoto help make sure your content doesn't flow out of its container by mistake. Includes links and discussion of other solutions, too. Nicely done. [Tutorial dated 02/26/2005, by Alex Walker, for SitePoint's Pixel Perfect: Design Blog.]
Dynamic Layouts and CSS Positioning
- Dynamic Resolution-Dependent Layouts
A 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 Layout
Interesting 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 Positioning
Two 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] - The Holy Grail CSS Layout Fix for IE7
This post explains and provides the CSS to fix “an annoying bug with the shiny new Internet Explorer 7” along with the padded version, too, for A List Apart's In Search of The Holy Grail, “an easy way to create a three-column, source-ordered, table-less layout with a fluid column in the middle”. [Article/tutorial dated 11/08/2006, by Gerd Riesselmann, Gerd Riesselmann: Notes From the Bog.] - In Search of The Holy Grail
This much-discussed tutorial provides an explanation and the markup to create a three-column, source ordered layout with the following:- have a fluid center with fixed width sidebars,
- allow the center column to appear first in the source,
- allow any column to be the tallest,
- require only a single extra div of markup, and
- require very simple CSS, with minimal hacks patches.
- Liquid Layouts Using CSS - the Joy, the Pain, the Tears
A slide presentation with available podcast (sound) given on how to manage the potential problems of liquid layouts and CSS. [Tutorial dated 09/30/2005, by Russ Weakley, Max Design.]
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 thelegendelement. 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.]
