Free CSS Website Layouts

These free CSS website layouts give you a great starting point for your next website project. All layouts were generated by CSS Sculptor and are just a small sample of the flexibility and power of the extension. CSS Sculptor gives you total control over every aspect of your page, and makes creating valid CSS layouts fast. We created all the following layouts in less than 30 minutes! Try accomplishing that with hand-coding!

All layouts embed the CSS code into the page, so there is no external stylesheet to download. We recommend moving the CSS into an external linked stylesheet for easier site-wide customization (we could have created an external stylesheet in Sculptor but we opted to keep all the code within the same file). The CSS code is commented in detail, so customizing the layouts is very simple. All layouts also include CSS code for printer-friendly output.

 

Fixed-width CSS layouts - 760 pixel width
Width: 760 pixels fixed
Alignment: Centered
Sidebars: None
Header: Yes
Footer: Yes
PreviewDownload
Width: 760 pixels fixed
Alignment: Centered
Sidebars: Left
Header: Yes
Footer: Yes
Preview Download
Width: 760 pixels fixed
Alignment: Centered
Sidebars: Right
Header: Yes
Footer: Yes
PreviewDownload
Width: 760 pixels fixed
Alignment: Centered
Sidebars: None
Header: Full Width
Footer: Yes
PreviewDownload
Width: 760 pixels fixed
Alignment: Centered
Sidebars: Left
Header: Full Width
Footer: Yes
PreviewDownload
Width: 760 pixels fixed
Alignment: Centered
Sidebars: Right
Header: Full Width
Footer: Yes
PreviewDownload
 
Width: 760 pixels fixed
Alignment: Centered
Sidebars: Left, Right
Header: Full Width
Footer: Yes
PreviewDownload
Width: 760 pixels fixed
Alignment: Centered
Sidebars: Left, Right
Header: Yes
Footer: Yes
PreviewDownload
 
Fixed-width CSS layouts - 960 pixel width
Width: 960 pixels fixed
Alignment: Centered
Sidebars: None
Header: Yes
Footer: Yes
PreviewDownload
Width: 960 pixels fixed
Alignment: Centered
Sidebars: Left
Header: Yes
Footer: Yes
PreviewDownload
Width: 960 pixels fixed
Alignment: Centered
Sidebars: Right
Header: Yes
Footer: Yes
PreviewDownload
Width: 960 pixels fixed
Alignment: Centered
Sidebars: None
Header: Full Width
Footer: Yes
PreviewDownload
Width: 960 pixels fixed
Alignment: Centered
Sidebars: Left
Header: Full Width
Footer: Yes
PreviewDownload
Width: 960 pixels fixed
Alignment: Centered
Sidebars: Right
Header: Full Width
Footer: Yes
PreviewDownload
 
Width: 960 pixels fixed
Alignment: Centered
Sidebars: Left, Right
Header: Full Width
Footer: Yes
PreviewDownload
Width: 960 pixels fixed
Alignment: Centered
Sidebars: Left, Right
Header: Yes
Footer: Yes
PreviewDownload
 
Liquid CSS layouts

Liquid website layouts stretch to accomodate different browser sizes. Sidebars and content areas are both sized as a percentage of the page width, so both stretch and shrink as the browser window is resized. All layouts are coded to have a minimum page width of 760 pixels and a browser window width of 80 percent. Min-width is a CSS 2.0 property and is not supported in older browsers such as IE 6.0, but does work in Firefox, IE 7+ and Safari.

Width: Liquid - 80%
Alignment: Centered
Sidebars: None
Header: Yes
Footer: Yes
PreviewDownload
Width: Liquid - 80%
Alignment: Centered
Sidebars: Left
Header: Yes
Footer: Yes
PreviewDownload
Width: Liquid - 80%
Alignment: Centered
Sidebars: Right
Header: Yes
Footer: Yes
PreviewDownload
   
Width: Liquid - 80%
Alignment: Centered
Sidebars: None
Header: Yes
Footer: Yes
PreviewDownload
   
Hybrid CSS layouts

Hybrid CSS websites have one column that expands with the browser window and one column that is a fixed width. It these layouts, the side column is set at a fixed with, and only the content portion of the page expands with the window. As with the liquid CSS layouts, the layout width is set at 80 percent of the window width with a min-width of 760 pixels. Again, min-width only works in browsers that support CSS 2.0.

Width: Hybrid - 80%
Alignment: Centered
Sidebars: Left, Right
Header: Yes
Footer: Yes
PreviewDownload
Width: Hybrid - 80%
Alignment: Centered
Sidebars: Left
Header: Yes
Footer: Yes
PreviewDownload
Width: Hybrid - 80%
Alignment: Centered
Sidebars: Right
Header: Yes
Footer: Yes
PreviewDownload
Elastic CSS layouts

Elastic CSS layouts allow your page containers to expand depending on the site visitor's text size preference. The layout widths are defined in ems, so as the text size increases, so does the width of the content containers. To test the layouts, simply preview and choose a larger or smaller font in your browser preferences.

Width: Elastic - 70ems
Alignment: Centered
Sidebars: Left, Right
Header: Yes
Footer: Yes
PreviewDownload
Width: Elastic - 70ems
Alignment: Centered
Sidebars: Left
Header: Yes
Footer: Yes
PreviewDownload
Width: Elastic - 70ems
Alignment: Centered
Sidebars: Right
Header: Yes
Footer: Yes
PreviewDownload

How to create 100% height side columns using faux columns

All the side columns in the layouts are created using CSS divs. If your main content section extends lower than the side column (see this example), your column will end above the footer. If you want your side column to extend to your footer no matter how little content it contains, the trick is to use "faux columns" in your layout.

Faux columns are nothing more than a vertically-repeated image that is placed into the background of your #contentwrapper div. This is the container which holds both your main content and any sidebars you may have.

You must be using either a fixed-width layout or a hybrid layout with a fixed column width for this to work, however. Elastic and liquid layouts resize columns as the text or browser size changes, so a faux column will not work in those layouts.

Here's how to create a faux column:

First, determine your desired sidebar column width. We'll use 200 pixels for this example, and we will use our 760 pixel fixed-width left column layout. Our column has 10 pixels of left and right padding, so the actual width of our column is 220 pixels.

Open up your favorite web image editing software and create a blank box that is 220 pixels wide by 20 pixels tall. Next, Draw a box that fills the entire image area. Fill the box with the color you wish to use in your column and export the image as a web image.

In our 760 pixel example, the current column color and right border is created in the CSS styles. We need to remove the background color and right border from the #leftColumn1 div because we will actually be adding the image we just created to the #contentWrapper div, which lies behind the left column.

Here's the relevant code:

#outerWrapper #contentWrapper #leftColumn1 {
background-color: #eef6ed; <--must be removed
border-right: solid 1px #8ab573; <--must be removed
float: left;
padding: 10px 10px 10px 10px;
width: 200px;
}

Once the background color and border is removed, we can now add the background image to the #contentWrapper div. Since the CSS does not contain a #contentWrapper ID selector, we need to create one in order to style it. In Dreamweaver, the easiest way to add it is to select the <div#contentWrapper> at the bottom of the code or design view window. Your cursor must be positioned inside either the content or the side column div for it to be selectable.

Once selected, go to your CSS Styles window and right click anywhere to bring up the menu. Select "New", check the "Advanced" radio button, and name the ID #contentWrapper. Click OK and you can now add the background image you just created. Simply select "Background" from the category list, browse to your image, set the image to "repeat-y", horizontal position is "left" for a left column and "right" for a right column. If you have a 3-column layout, your background image will span across the entire width of your container. Vertical position is not relevant, as it is vertically repeated.

Your added CSS code should look something like this:

#contentWrapper {
background: url(faux-column.gif) repeat-y left;
}

Now click "OK" and you should now see the image you created span from the bottom of the header to the top of the footer. Here's our completed faux column example using the same color scheme as before.

Want an easier way to create a faux column? Use CSS Sculptor and add your background image in an easy-to-use wizard interface! No hand-coding and no need to be an expert at CSS!





Mobile-ready Templates
  • Interspire
  • WebAssist
  • Extend Studio
  • Ajatix
  • DWBooster
  • DW Calendars
  • Web Hosting
  • Web Hosting