Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library
Submit an original CSS code
CSS Layouts
Web Graphics
Online Tools:

Advertise Here

CSS Library: Form CSS: Here

CSS Tableless Form

Author: Dynamic Drive

This is a tableless CSS form which you can use as a template for implementing your own lightweight form. It uses a combination of float and negative margins to create a two column layout for the form. One issue with the form is IE6's three pixel jog bug, which is addressed in the demo manually, by offsetting the jogged checkboxes with an additional margin. You may wish to implement a more thorough fix, though it will increase the size of the code. IE7 does not suffer from the 3 pixel bug.

The form is responsive in that it expands to take advantage of the full horizontal space of the page when the window is 480px or less, or that of most smart phones.

Demo:

Male: Female:

Tennis
Reading
Basketball

The CSS:

The HTML:

Code Info

Rate this code:

Date Posted: 06/20/2006

Revision History: 06/10/2013 Form now responsive, adapting to windows 480px or less.

Usage Terms: Click here

Your Comments (189)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.

Comment Pages 19 of 19 pages « First  <  17 18 19

Posted by zombo09 on 05/29, 08:36 PM
Posted by re on 05/30, 10:43 PM
Posted by であ on 06/01, 09:44 PM
Posted by 処女 on 06/01, 09:45 PM
Posted by 出会い on 06/02, 05:27 AM
Posted by 出会い on 06/02, 06:11 PM
<a >深圳搬家公司</a>
<a >深圳搬家</a>
<a >深圳空调维修</a>
<a >深圳罗湖搬家公司</a>
<a >深圳福田搬家公司</a>
<a >深圳南山搬家公司</a>
<a >深圳盐田搬家公司</a>
<a >深圳宝安搬家公司</a>
<a >深圳龙华搬家公司</a>
<a >深圳龙岗搬家公司</a>
<a >深圳布吉搬家公司</a>
<a >深圳装卸公司</a>
<a >深圳吊车公司</a>
<a >深圳尾板车出租</a>
<a >深圳吊装公司</a>
<a >深圳搬厂公司</a>

<a >深圳空调加雪种</a>
<a >深圳空调安装</a>
<a >深圳空调拆装</a>
<a >深圳海尔空调维修</a>
<a >深圳LG空调维修</a>
<a >深圳新科空调维修</a>
<a >深圳志高空调维修</a>
<a >深圳三菱空调维修</a>
<a >深圳澳柯玛空调维修</a>
<a >深圳格力空调维修</a>
<a >深圳春兰空调维修</a>
<a >深圳大金空调维修</a>
<a >深圳日立空调维修</a>
<a >深圳松下空调维修</a>
<a >深圳三星空调维修</a>
<a >深圳索尼空调维修</a>
<a >深圳中央空调维修</a>
<a >深圳奥克斯空调维修</a>
<a >深圳美的空调维修</a>
<a >深圳空调清洗</a>
<a >空调维修</a>
Posted by eh on 06/02, 11:24 PM
A nice solution, thanks. I would probably still use tables for a more complex form than this though as it's just easier to lay out the different fields and associated text. However, I now use CSS as much as possible within my tables, so the HTML remains fairly light.
Posted by RoryY on 06/04, 01:11 PM
Posted by zol on 06/04, 04:45 PM

Comment Pages 19 of 19 pages « First  <  17 18 19


Commenting is not available in this weblog entry.
Copyright 2006-2014 Dynamic Drive Read our Usage Terms before using any of the CSS codes.