Browse By

15 Places to Find Your Next CSS Layout

Creating a theme is a multistep process. You have to pick the color scheme, decide how many graphics to include and what purpose they will serve, as well as decide on a layout. Sometimes it isn’t easy to decide on a layout and it would be nice to have some examples and ideas to look at. That is what I’m focusing for this post. Here are 15 great resources to help you pick your layout and download the CSS to get you started.

Free-CSS offers over 250 different free CSS layouts for you to use. You can browse them and preview them as a thumbnail as well as click on each to see a demo in a GreyBox. Their terms of use are available in each zip file as well as on the website. The authors give this general explanation “All of the CSS layouts that are featured within Free CSS are distributed under some form of GNU/GPL License or under a Creative Commons License or are free” (free-css.com).

IronMyers offers three different layout collections. They are the 750px collection which includes 56 different layouts, the 950px collection which includes 56 layouts, and the 100% collection which also includes 56 layouts. You can view an image of the layout as a preview or you can view all the layouts in demo format.

Code-Sucks.com has created a number of different examples of CSS layouts. You can see simple images of them or view them as a demo layout. All 95 of their layouts validate against the Strict DOCTYPE.

Layout Gala offers 40 different layouts that are viewable as thumbnail image previews or demos of the actual layout. You can download each layout individually or download all 40 in a zip file if you want. All of the layouts are based on five sections; they each include a header, content, navigation, other stuff and footer section.

Max Design offers a number of CSS layouts covering the typical ones like two and three column layouts. The main advantage to this site is the addition of tutorials to each of the layouts. There is an explanation and help offered for each layout to help you learn a little more than just looking at samples, demos, and code. The code is available to copy and paste for your use.

Nice and Free CSS Templates offers a number of layouts including three columns, four columns, and box layouts. Each template is available as a thumbnail preview, a demo, and the CSS code is available to copy and paste for your use. All of the templates validate to W3C standards for XHTML 1.0 and CSS.

CSS Play offers 14 different CSS layouts including three column and fixed. You can view demos of the layouts and the CSS code is displayed to copy and paste for your use. The copyright and usage policy is listed on the bottom of the main page.

For those of you who already own Dreamweaver CS3, it has a number of CSS layouts built in. You can easily find them by simply creating a new HTML file and choosing one of the templates provided. They offer previews next to the choices as a selection is made.

About.com offers a huge wealth of information including a number of CSS layouts. There are more than 25 layouts available, each with a demo to look at as well as a detailed description about the layout. You can save the templates for use in your websites. They also have listed the terms of use on their website.

SSI Developer offers CSS layouts in three different categories. They have created two column, three column, and general templates. You are able to view an image preview, view a live demo with some generic content, and download the layouts as a zip file.

The Dynamic Drive CSS Library offers a number of great CSS layouts, among other great resources. They have created almost 50 different layouts in five categories. You can choose from two column, three column, fixed layout, flexible layout, and CSS frames. Once you decide on a layout, you can view an example and get a copy of the code.

Mitch Bryson has created eight basic CSS layouts. Each layout has a thumbnail image preview, a demo page, and a download link to the layout zip file. The layouts include one column, two column, three column, fixed, and fluid.

The Layout Reservoir offers two main CSS layouts. There is two column and the the three column layouts available. The two column layout has an example with a left hand menu and a right hand site menu. Each layout has the CSS code available to copy and paste for your use.

Glish has compiled six of the most common CSS layouts used on the web. They give examples and the CSS code for 3 columns, the holy grail, 2 columns, ALA style, 4 columns, all fluid, 3 columns, static width and centered, and nested float. The offer the code in a textbox at the bottom of the examples for you to copy and paste for your use.

WebDev offers two column and three column CSS layouts licensed under a Creative Commons License. Each layout has a demo available to check out. Along with the typical two and three column layouts, there are also some discussion board layouts, threaded and unthreaded, as well as some random template layouts. You can download all of the layouts in one zip file.