CSSBEAUTY™

CSS3 Multi-column Layouts. A ncie guide that teaches you how to implement CSS3 Multi-Column layouts.

A Guide on Layout Types in Web Design. A nice recap of the many different types of layouts that can be used in web design.

Responsive Web Design. Using fluid grids, flexible images, and media queries, Ethan Marcotte shows us how to embrace the “ebb and flow of things” with responsive web design.

The Fluid Grid system. Allows designers to use the screen real estate on large monitors and retain great design on smaller ones.

The CSS 3 Flexible Box Model. Explains what the flexible box model is and how to use it.

jQuery Masonry 1.0. Think of it as the flip side of CSS floats. Masonry arranges elements vertically then horizontally according to a grid.

The Multi-Column Layout Module. Learn more about these new CSS3 properties that allow for content to flow into flexibly-defined columns.

Adaptive CSS-Layouts: New Era In Fluid Layouts?. Learn effective techniques to create 100%-functional adaptive CSS-layouts.

Fluid Images. A new technique for dealing with images in fluid layouts.

Object Oriented CSS Framework. Allows you to write fast, maintainable, standards-based front end code.

Vertical Centering With CSS. Learn five different methods to vertically center objects using only CSS.

CSS Layouts. A collection of 224 full Grade-A browser supported CSS layouts.

EqualHeights jQuery Plugin. Pretty handy equal height columns plugin for jQuery.

Dynamic Layout. A simple JavaScript library that allows you to easily adjust page layout based on the current browser width.

Killing Some Bad Layout Conventions. Andy Rutledge exposes flaws and suggests alternatives for two clichéd conventions.

Eric Meyer's CSS Sculptor. Web standards compliant CSS layout creator from Eric Meyer and WebAssist.

6 Keys to Understanding Modern CSS-based Layouts. Key elements needed to create a solid CSS-based layout that is consistent cross-browser.

CSS Layouts: The Fixed. The Fluid. The Elastict. Learn about the quirks, pros and cons for each of these layouts.

The Principles of Beautiful Web Design. A hands-on tour of the underlying concepts of web page layout and composition. Make sure you check out the book as well.

Flexible fixed layouts. Creating fixed layouts for multiple screen sizes.

Multi-Column Layouts Climb Out of the Box. A cleaner approach to designing multi-column layouts.

Switchy McLayout: An Adaptive Layout Technique. Lets you define one layout and appearance for wide screens, one for medium-sized screens, and another for PDAs.

Vertical Centering with a Shiv Div. Vertically center blocks in browser windows using a bit of markup and CSS.

Dynamic Drive CSS Layouts. CSS based page templates to quickly define the skeleton of your pages.

Create a simple liquid layout. Make a simple but effective liquid layout, which will work across browsers and uses absolute positioning.

Screen Resolution and Page Layout. Optimize Web pages for 1024x768, but use a liquid layout that stretches well for any resolution, from 800x600 to 1280x1024.

Schillmania Rounded Corners: Perhaps the best, most pragmatic implementation of rounded corners with images and css using standard module formats.

Understanding “Any order columns”. How to have three columns in one order in the source document— but laid out in any order we want using CSS.

Clearance. Clear floats in your layout using javascript. The script positions elements absolutely, and changes the tallest element to relative.

CSS Grid Calculator. An application built in Flash. You can use it to quickly visualize page layout and draw grids in a variety of ways.

The importance of window-width. Simon Collison, from Colly Logic, discuses the dilemma of screen width and site layout.

Rock Solid CSS Layouts. Step-by-step tutorial on how to create a slick, flexible, and solid 2-column layout.

Variable Fixed-Width Layout. Allows users to specify the width they'd like to see your site layed out using a combination of PHP, JS and CSS.

How to build dynamic-width pages now. Using JavaScript to test for different screen resolutions and load the corresponding stylesheet.

Simple Organism. A simple tutorial that will take you from creating a bare bones layout, to one stylized & dynamic using some CSS and PHP magic.

CSS Problem Solving SxSWI. Ethan Marcotte's SXSW presentation "Float like a Butterfly".

Mollio CSS/HTML Templates. A simple set of html/css templates that use css for layout.

Layout Gala. 40 layouts based on the same markup, each with no hacks, valid CSS and HTML, and good cross-browser compatibility.

CSS Layout Tutorial. This guide will attempt to take you step by step, through the process of creating a fully functioning CSS layout.

CSS Drop Column Layout. 4 columns with fixed widths, with the column on the furthest right dropping when the window is re-sized.

In Search of the Holy Grail. Three columns. Two fixed-width sidebars with a liquid center. ALA 211 issue.

CSS Layout Starting Points. Speed up your process instead of starting out with blank CSS and (X)HTML documents every time.

Changingman layout. A liquid three column CSS layout with a fixed centre column, released under a Creative Commons Attribution 2.0 license.

Div thinking cap. Stop thinking of how you'll slice your layout, start thinking on how to put each graphic into a container...

Dynamic Resolution Dependent Layouts. An alternative for those trying to find a balance between fluid and fixed layouts.

One clean HTML markup, many layouts. Fluid layouts with 5 content DIVs, a short stylesheet, and no hacks.

In search of the One True Layout. Total Layout Flexibility, Equal Height Columns, Vertical placement of elements across grids/columns. Examples here.

Introducing the CSS3 Multi-Column Module. + CSS Swag: Multi-Column Lists. Two great articles by the guys over at ALA.

An Overview of Current CSS Layout Techniques. Strategies used around the web to build the foundation of every CSS-based web site: layouts.

Two good articles over at WG. Footnotes and sidenotes with JavaScript and CSS. + Zoom Layout Starter Kit.

Zoom layout. A way for making sites more accessible and readable for low-vision users.

Nice summary of the Traditional CSS-based tableless layouts, as well as pros and cons of each.

Fixed or fluid width? Elastic! Combining both fixed and fluid layouts to come up with an elastic width layout.

A simple introduction to 3 column layouts. Good article by joshuaink.

Cross-Column Pull-Out Part Two: Custom Silhouettes. Technique for wrapping around the edges of a non-rectangular image positioned between columns.

Cross-Column Pull-Outs Wrap text around a picture centered between two columns.