1. Technology

Free Web Templates

These Free Web Templates Will Help You Build an XHTML+CSS website


Use these free Web templates to create valid XHTML documents using CSS instead of tables. If you don't want to learn to write CSS layouts, you can still create valid XHTML using free Web templates. The newest are listed first.

  • Hierarchical Outline in HTML and CSS
    XHTML 1.0 Strict Doctype; SEO Ready
    If you've ever needed to write an outline for a paper, you will like this template. It uses two tags (OL and LI) and some styles to make an indented, correctly numbered, 5-level outline for a term paper.
  • 3-Column Centered Flexible Width Layout Template
    XHTML 1.0 Strict Doctype; SEO Ready
    Centering your three column layout makes it fill the browser viewport nicely. And this template uses a flexible width so that it fits different resolutions correctly.
  • Centered Single Column Layout
    XHTML 1.0 Strict Doctype; SEO Ready
    This is a very basic layout, with the content centered on the page in an 80% wide column. Usually the page itself is a different background color, with the content surrounded by a border. For this template, I chose to make the main page color grey with a black border.
  • 2-Column Centered Flexible Width Layout Template
    XHTML 1.0 Strict Doctype; SEO Ready
    A very common layout you find on the Web is a 2-column centered layout that flexes to match the current window width. This layout validates as XHTML 1.0 Strict, uses h1 and h2 tags for headlines and the main content area comes first on the page.
  • Fifty-Fifty Website Template
    This is a two column layout with an optional footer. It is built as a flexible width template with two columns, one with a colored background and one not. It is built so that browsers that support the max-width property will not expand the page too wide to read.
  • Portrait Photo Gallery Website Template
    This is a photo gallery meant to show portrait photos one per page with a short description to the side.
  • Fancy Photo Gallery Layout
    This free Web template is a fancier version of a photo gallery. It uses JavaScript to display captions and the images themselves as well as pure CSS for the site layout.
  • Simple Portfolio Layout
    This Web portfolio layout allows you to categorize your portfolio pieces and showcase each one on a separate page.
  • Calendar Layout
    Create an online calendar, month by month.
  • Overlapping Sections in a Two Column Layout
    A two column layout where the columns overlap the headline.
  • A Polaroid or Instant Photo with CSS
    Put your images up as a polaroid.
  • Two Columns with Header and Footer
    Adding a header and footer to a two column layout is fairly easy.
  • Photo Gallery Layout - One Photo per Page
    A photo gallery layout with larger thumbnails that places one picture per page.
  • Two Column Stretches to Fit Layout
    This is really a four column layout that stretches the three columns on the right to either stack or fit depending upon the browser width.
  • Two Column Faux Column Layout
    A two column layout with faux columns that stretch the height of the page, no matter how tall the content is in either column.
  • Multiple Boxes Layout
    Learn how to set up a layout with multiple boxes for images and text. This layout looks like it was done with tables, but it's 100% CSS using float and width elements. This layout also demonstrates the use of multiple classes on one element.
  • 3-Column with Header and Footer Layout
    Once you have a 3 column layout, you will probably want to put a header and footer on it. This template makes it easy.
  • Better 3 Column Layout
    There are many ways to do a 3-column layout using CSS and XHTML, but this one is one of the better ways to get 3 columns on your Web page without a lot of headache or trouble. And this 3-column template works in both IE and Mozilla (Netscape) browsers.
  • 3 Column Layout with Footer
    Once you have 3 columns on your Web page, getting the footer to display below all three columns can also be a pain. Luckily, with just a slight modification to the better 3 column layout, you can add a footer with ease.
  • Fake Frames Layout
    While I don't recommend using this to replace frames, this is a good template for learning how the overflow property works.
  • Three Column Top Layer Layout
    The three column layout is very difficult to do in CSS, but it is possible. And this variation adds a top layer.
  • Top Square Navigation Layout
    I got the idea for this simple layout from a forum I was reading, where the writer wanted the text in the layout to wrap around the navigation box. I just thought it might look nice.
  • Wrap Text Around an Image Layout
    An interesting effect in print is the ability to wrap text around an image so that it follows the contours of the image. With this CSS trick, you can mimic this effect on your website.
  • Brown Crossbar Layout
    This website layout was suggested to me by Marcia, the Bipolar Disorder Guide at About - it uses three divs to create a cross in the upper left of the page with the main content held below it.
  • Photo Gallery Layout
    This layout provides a simple way to layout a thumbnail photo gallery. It includes JavaScript to create the secondary pages.
  • Form Layout
    This layout shows you one way to display a form using valid XHTML and no tables.
  • Left Navigation Top Header with Photo and Colors
    This layout takes it's look and feel from a photo of an iris from my garden. The layout can be used for a photo page, or an ecommerce site product detail page, or just with a decorative photo as my example displays.
  • Floating Navigation Box
    When you don't have a lot of navigation links, sometimes all you need is a box at the top of your pages with the navigation in there. This box floats to the right or left and the text in the main area flows around it.
  • Top and Bottom Rows
    Sometimes all you want is branding at the top and contact/copyright information at the bottom.
  • Two Column with Top Branding Layer
    This layout adds to the basic two column layout by adding a top row for branding and global navigation information.

Terms of Use

You are free to use any of the free Web templates here for personal or commercial designs, either in print or on the Web, excluding items for resale. You may not give away, sell, or redistribute the files in any way. Do not post these files on any another website, electronically distribute them, or include them in any package for distribution. If you find these files useful, please include a credit line or a link back to this site [http://webdesign.about.com/]. Terms of use last modified 12/07/2008.

©2014 About.com. All rights reserved.