Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library

Advertise Here

CSS Layouts
Web Graphics
Online Tools:

CSS Library: Form CSS: Here

Responsive 2 column form

Author: Dynamic Drive

This is a clean, two column form that's also responsive, turning into a single column spanning the entire width of the page when the window's size is 480px or less. The two column design and large controls are meant to make the form more inviting to fill out, by breaking up the text input fields into two columns, thus appearing less overwhelming to complete. Beautiful forms equate to inviting forms!

Click here to see the form in a liquid layout, then try resizing the browser window to 480px or less. Notice the responsive layout of the form.

Demo:

Sex:
  • Male:
  • Female:
Skills:
  • JavaScript:
  • CSS:
  • PHP:
  • Ruby:
  • Python:

The CSS:

The HTML:

Code Info

Rate this code:

Date Posted: 06/12/2013

Revision History: None

Usage Terms: Click here

Your Comments (0)

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.


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