From Jennifer Kyrnin,
Your Guide to Web Design / HTML.
FREE Newsletter. Sign Up Now!

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.

• 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 Web site.
• Brown Crossbar Layout
  This Web site 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.
• Three Column Layout
  Similar to a newspaper, this three column layout features fixed width columns on the right and left with a variable width center column for your main content.
• Two Column Layout
  This is a very basic layout, with two columns. The left is fixed width and the right is the rest of the window space.
• Centered Single Column Layout
  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.

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 Web site, 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 8/29/2004.