1. Computing

Discuss in my forum

Free Web Template: Multiple Boxes Layout

By , About.com Guide

Multiple Boxes Layout

Multiple Boxes Layout

Jennifer Kyrnin

About this Web Template:

I was bored one day, so I started creating grids of possible page layouts. This layout is a fairly complex and boxy layout that I created right on a grid pattern. It shows how you can use multiple boxes to generate a style. Plus, in the sample site I show how to change the divs to other elements and get the same styles.

See The Template

See a Sample Page

Works in Browsers:

Windows

  • Firefox and Mozilla 1
  • Internet Explorer 5 and 6
  • Opera 8.5 and 9

Macintosh

  • Firefox and Mozilla 1
  • Internet Explorer 5
  • Netscape 7
  • Safari 1

Details:

  • entire document ~770 pixels wide
  • six columns of boxes, each 120 pixels wide
  • four rows of boxes 120 pixels high
  • CSS demonstrates use of multiple classes on one element

To Use the Free Web Template:

  1. Copy the HTML into a document on your Web server
  2. Copy the CSS to a file named styles.css and put it in the same directory as your HTML file
  3. Change the text to your content
  4. Publish the Web page and CSS file

The Web Site Template Data:

More Web Site Templates:

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.

©2013 About.com. All rights reserved.