- You are here:
- WebsiteTips Home
- Web Site Resources
- Markup, Code
- CSS
- CSS Templates
CSS - Cascading Style Sheets
Free and Commercial CSS Templates and CSS Layout Templates
The CSS Templates, CSS Layout Templates section has links to a variety of free and commercial Web page templates and layout templates based on CSS, including using CSS positioning for layouts. There are 2-, 3-, and 4-column all-CSS layouts, cross-browser, cross-platform layouts that work with a wide range of browsers, some including Netscape 4, and all or nearly all of them validate to W3C Recommendations, too. Some of the CSS templates include designs and images, while others provide the CSS layouts and templates for you to implement with your own designs. The commercial CSS templates include the designs and CSS layouts and are ready for you to add your own content.
My goal is to provide links only to quality CSS templates and CSS layout templates that are well tested for cross-browser compatibility. There are a couple of listings that don't provide cross-browser compatibility and testing information, so I've noted those within my annotated listing comments.
See also HTML
Dreamweaver Templates for more CSS templates and Web site templates.
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:
- Commercial CSS Templates, CSS-Based Web Site Templates
- Free CSS Layout Templates, Free CSS Templates
- Other CSS Layout Templates Links Resources
Also within CSS - Cascading Style Sheets:
- CSS - Cascading Style Sheets Home
- W3C CSS Recommendations, Working Drafts, and Tutorials (1 page)
- CSS Tutorials, Articles (6 pages)
- 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 Tools - Editors, Reference Charts, Validators, and More (1 page)
- CSS Discussion Lists, Newsgroups (1 page)
Commercial CSS Templates, CSS-Based Web Site Templates
See also HTML Dreamweaver Templates for more CSS templates and Web site templates.
- Dreamweaver CSS Page Templates, by Project Seven
Beautifully created, high quality CSS templates in a variety of styles, layouts, color combinations, and packages. You'll find 1-, 2-, 3-column CSS layouts and a wide variety of layouts and designs, all with designs, page markup, CSS, detailed instructions for implementation, and free technical support. Currently available are Page packs, single page CSS templates, and Learning Packs. The Learning packs “come with rich, immersive PDF User Guides that walk you through the process of building your page and its images. Learn to build a page and all its assets.” Customizable, too. Fantastic and reasonably priced. Editor note, disclaimer: Project VII is not paying me for these comments or this listing. Like all the listings at Websitetips.com, I've listed these here because of how impressed I am with their products, their philosophy, and their business. [Templates by Project Seven.]
New and Popular Books on CSS
Recommended by WebsiteTips.com
Read reviews, why we recommend each book.
In association with 
Free CSS Layout Templates, Free CSS Templates
See also HTML Dreamweaver Templates for more CSS templates and Web site templates.
Free Three Column CSS Layout Templates
3-column Web page layouts are a popular format. The listing below is specifically for freely available 3 column all CSS layouts. You'll find more within the Free CSS Layout Templates Variety section and listings to more in the Other CSS Layout Templates Links Resources below, too.
Looking for complete CSS-based Web site design templates? See below, Free CSS-Based Web Site Design Templates.
- 3 Column Layout - Fluid, Multi-Column Stretch
Header, footer, fluid center with fixed width sides - quirks mode for IE6. [Templates by tanfa.co.uk.] - 3 Column Layout - Fluid, Multi-Column Stretch
Header, footer, fluid center with fixed width sides - Strict mode for IE6. “This layout can also be amended quite easily to be fully fluid or to change the display order of the columns. For example to change from fixed width sides to percentage width sides just change the width of the two absolutely positioned divs then adjust the padding on the main content column to suit.” [Templates by tanfa.co.uk.] - 3-col layout via CSS
This 3-column layout by Petr Stanicek even has a footer that spans the bottom of the page, no hacks, and is cross-browser tested for a multitude of browsers. Netscape 4 bungles it, but it's easy enough to give Netscape 4 many of the CSS features while hiding the CSS positioning details from that browser anyway. [Templates by Petr Stanicek, pixy.cz.] - CSS Templates
Includes cross-browser, cross-platform templates that includes a header, 3 column body, and footer. Well done. [Templates by Michael Angeles, urlgreyhot.com, formerly studio id.] - Perched Upon a Lily Pad
A 3-column all CSS, cross-browser friendly 3-column CSS template freely available via positioniseverything.net. Read all the tips and follow along. Very helpful. [Templates via positioniseverything.net.] - Three Columns CSS Layout
“A three column + Header + Footer with fluid middle column AND all columns the same height. NO JAVASCRIPT, No fancy CSS and I have included a link in each column so that you can make any one the longest column. Works in all the latest browsers - amazing - couldn't be simpler!...” [Templates by Stu Nichols, CSS Play.]
Free CSS Layout Templates Variety
The listing below is for sites that offer a variety of columns and layout styles that are very basic, with the idea that you'd use it as a basic framework to then add your own Web site designs. Looking for complete CSS-based Web site design templates? See below, Free CSS-Based Web Site Design Templates.
- CSS Layout Techniques
Eric Costello's cross-browser CSS layouts collection, with some from around the 'Net and some of his own. Includes 2, 3, 4 column fluid and static layouts (no tables - all CSS), static width and centered, nested float, more. Well tested with a multitude of browsers, platforms. Free for the taking, too. Also includes CSS Resources and CSS Tutorials. Fantastic. [Templates by Eric Costello, glish.com.] - CSS Layouts
Craig Saila has generously provided a terrific selection of freely available CSS layout templates that are cross-browser, cross-platform compatible, some even working fine with Netscape 4 browsers. Well tested with a multitude of browsers, platforms. Included are explanations and charts showing browser support for each layout template. Craig also has tips and tutorials at his site. [Templates by Craig Saila, saila.com.] - CSS Layouts
A variety of free CSS layout templates for use to implement with your design. Well tested, documentation, more. Cross-browser fixed, simple minimum width layout, 100% background image layout, three columns, CSS frames, fixed position layout (fixed is for IE6) and a variety of other layouts. [Templates by Stu Nichols, CSS Play.] - The Layout Reservoir
Rob Chandanais' BlueRobot.com CSS layouts - free resource of layouts, including two column and three column varieties, all with CSS. Well done! Well tested with a multitude of browsers, platforms. [Templates by Rob Chandanais, bluerobot.com] - W3C Core Styles
Offered by the W3C, you can link directly to the style sheets at the W3C server if you wish, using these pre-made CSS templates for your own site. [Templates by Todd Farhner and colleagues at Verso for W3C]
Free CSS-Based Web Site Design Templates
The listing below is for sites that offer ready-made designs prepared for you to just add your content - all images, HTML/XHTML, CSS, etc. Looking for just the basic CSS layouts to use to create your own design? See above, Free CSS Layout Templates - Variety.
- CSS Design Templates
Complete Web site templates that include all the images, HTML, CSS, etc. CSS and XHTML, standards-based templates for Web sites, WordPress themes, professional templates, Blogger templates, Joomla templates, and more. Free for licensed use. [Website Templates via CSS Design Templates.] - CSS Templates
Over 200 free CSS layout templates and designs offered at this site by a variety of designers. A variety of layout styles available. No immediate information on cross-browser compatibility, and after checking a few zip files, they had no cross-browser compatibility or testing information either. [Templates via FreeCSSTemplates.org.] - Free CSS Templates
“All templates are made with valid XHTML (strict) and CSS, and they are supposed to be small, easy to work with and of high code quality. The templates do not contain any scripts or CMS-specific code, but they can be ported into themes and templates for a lot of different content management systems and blog scripts. For example, several of these templates have been turned into themes for WordPress and other CMS's.” [CSS Templates by Andreas Viklund, andreasviklund.com.]
Other CSS Templates Links Resources / CSS Layout Templates Links Resources
- ThreeColumnLayouts
An incredibly helpful resource for 3-column layout information. The handy chart lists links to quite a few 3-column layouts and indicates headers, footers, fluid, Netscape 4 compatible, and notes. Fabulous resource for a quick overview and helpful information about at least 20 3-column layouts around the Web. [Resources via css-discuss Wiki] - Free CSS Layouts And Templates
Fabulous listing here of high quality CSS-based layouts and CSS layout templates. “list of resources which offer free, gorgeous and valid CSS-based templates - usually with images and full layout structure, such as headers, navigation bars, content containers, sidebars and footers.” [Article/tutorial dated 01/12/2007, by Vitaly Friedman and Sven Lennartz, Smashing Magazine.]
