CSS layouts and layout tutorials

Three column layout. One fixed-width sidebar for your navigation, another liquid and a liquid center.

A three column fluid CSS layout: 100% height + 100% width and rounded content corners. This is a layout that is fluid (100% width), has a height of 100% and rounded content corners. There's also Three column fluid CSS layout with faux columns and 100% height.

No absolute positioning (no positioning at all), no hacks, same height of all columns. The left and right columns have fixed width (150px), the middle one is liquid. Any margin of the body may be used. It works in any modern browser.

Creating liquid layouts with negative margins. Includes three faux column layout.

Fixed three column layout with middle column first in source order.

A commentary on the advantages and pitfalls for using an elastic layout. There's another demo with another tutorial here: jontangerine.com

A liquid layout where the width also adjusts like an elastic layout when text size is increased. Internet Explorer 6 has IE-expressions for 'max-width' relative to User's font-size. Layout is fully liquid within the limits of given 'min-width' and 'max-width' values.

A CSS cross-browser layout solution with total layout flexibility, equal height columns and vertical placement of elements across grids/columns.

Liquid layouts which are halfway between a liquid and a solid. It doesn't expand in a way directly proportional to the width.

JavaScript and CSS based 3 column layout. Variety of Layouts from 100% liquid to a custom defined stage. Toggle between states with smooth transition effects (remove columns, adjust dimensions). Retains the layout on all pages of the site (cookie based). Miniature stand-alone JS (5555 bytes).

A variety of layouts with full Grade-A browser support and SEO Optimization.

A liquid, three-column layout which works in Netscape 4.x.

Eight liquid layouts for one html content page. Uses faux colums and no hacks.

No CSS hacks, iPhone & iPod Touch compatible, SEO friendly, Full length column background colours, No Images, No JavaScript, Resizable text compatible. 3 Column (Holy Grail) Liquid Layout, 2 Column Liquid Layout (Left Menu, Right menu, 50%) and Multi-Column Stacked Liquid Layout.

A variety of different layout solutions.

40 layouts based on the same markup, each with valid CSS and HTML, without hacks nor workaround and a good cross-browser compatibility.

A range of liquid layouts that cover all the basic necessities and a few more.

Yet Another Multicolumn Layout. A robust multicolumn liquid layout with examples of positioning of a variety of elements such as images and lists.

A series of CSS Boxes going from a simple single box, through 3 columns with a full width top box, elucidating browser bugs and the solutions needed.

How to recreate all the goodness of frames with not a frame tag in sight. Using width expression in quirksmode to work in IE.

Emulating the appearance of frames without using frames.

CSS Frames v2, full-height. This uses top: expression and clientHeight on the documentElement for IE6.

Using Javascript to create a dynamic layout dependent on the size of the browser window.

Making web page layout adaptive with respect to the size of the browser window using onresize and three potential layouts.

Using Javascript to turn a fixed or fluid CSS-based layout into a progressive one.

Accessible, semantic, well-formed XHTML mark-up with gracefully deprecating Javascript to adapt CSS to the resolution.

As we use a wider range of devices to access the web, we need more powerful and flexible ways of managing layout. Using JavaScript to serve devices whose viewports range from 240 pixels to about 1680 pixels.