1. Home
  2. Computing & Technology
  3. Web Design / HTML

Free Web Template: Form Layout

By , About.com Guide

XHTML CSS Form Layout

XHTML CSS Form Layout

Jennifer Kyrnin
About this Web Template:
This template answers a question I received in email a while ago - how to layout a form without using tables. This is a very position intensive layout - and in fact, I find it quite cumbersome. It uses the standard left nav with top header - if you're willing to change the positions of every form element, you can move them wherever they fit on your screen. It's not as elegant as I would like, but it does the job.

See The Template

Works in Browsers:

Windows

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

Macintosh

  • Firefox and Mozilla 1
  • Netscape 7
  • Safari 1
Details:
  • top header with 5px black lower border, 100px high
  • left column - green (#030) with white navigation links
  • main column takes up remaining space, and is positioned using absolute positioning
  • all form elements are individually identified and positioned precisely with absolute positioning
To Use the Free Web Template:
  1. Copy the CSS into a document named styles.css
  2. Copy the HTML into another document in the same directory
  3. Change the text to your content
  4. Publish both documents
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.

Explore Web Design / HTML
About.com Special Features

Holiday Central

What to eat, where to go, fun things to do and how to save money on the perfect gifts. More >

Family Tech Center

Stay connected and entertained with reviews on tips on the latest HDTVs, cellphones and more. More >

  1. Home
  2. Computing & Technology
  3. Web Design / HTML
  4. Web Design
  5. Principles of Web Design
  6. Layout
  7. Web Site Templates
  8. Free Web Templates
  9. Free Web Template: Form Layout>

©2009 About.com, a part of The New York Times Company.

All rights reserved.