How to render no-table HTML form into two columns with CSS using classes?


Tags: html,css,forms,layout

Problem :

I am trying to format a two-column form so that:

  • the labels are above each input field or text area
  • everything in class col1 is in the column on the left
  • everything in class col2 is in the column on the right
  • everything in class col12 spans both columns

Here is the HTML code I need this to work with:

    <div id="contactForm">
      <form method="post" action="">
        <h3>Contact us</h3>
        <p>To send us a work order, fill in the form below.<br /><strong>All the (*) fields are mandatory.</strong></p>
        <fieldset>
          <div class="col1">
            <label for="form_firstname">Firstname <span class="required">*</span></label>
            <input type="text" id="form_firstname" name="form_firstname" value="" />
          </div>
          <div class="col2">
            <label for="form_lastname">Lastname <span class="required">*</span></label>
            <input type="text" id="form_lastname" name="form_lastname" value="" />
          </div>
          <div class="col1">
            <label for="form_address">Address</label>
            <input type="text" id="form_address" name="form_address" value="" />
          </div>
          <div class="col2">
            <label for="form_city">City</label>
            <input type="text" id="form_city" name="form_city" value="" />
          </div>
          <div class="col1">
            <label for="form_email">Email <span class="required">*</span></label>
            <input type="text" id="form_email" name="form_email" value="" />
          </div>
          <div class="col2">
            <label for="form_phone">Phone <span class="required">*</span></label>
            <input type="text" id="form_phone" name="form_phone" value="" />
          </div>
          <div class="col12">
            <label for="form_attachment">Add Attachment <span class="form_attachment">*</span></label>
            <textarea id="form_attachment" name="form_attachment" rows="5"></textarea>
          </div>
          <div class="col12">
            <label for="form_message">Message <span class="required">*</span></label>
            <textarea id="form_message" name="form_message" rows="5"></textarea>
          </div>
          <div class="col12">
            <label for="form_message">Message <span class="required">*</span></label>
            <input type="submit" value="Send" formnovalidate="formnovalidate" />
          </div>
        </fieldset>
      </form>
    </div>

How do I code the CSS to style this HTML as required?

Here is the code on JSFiddle.



Solution :

Try this CSS:

#contactForm{
    width: 80%;
}
label,.col1,.col2,.col12{display: block;}
.col1{ float:right;}
.col2{float:left;}
.col12{clear:both;}
textarea{
    display: block;
    width: 100%;
}

http://jsfiddle.net/rx2gjpdw/3/


    CSS Howto..

    How can I line up the two containers in view?

    How to trim off Image in CSS?

    How to use JavaScript OnResize with delay or less processing intensive

    How to align an element when it locates below some float elements?

    How does one reduce the height of fontawesome text?

    how to properly override CSS in external file

    how do I create an HTML table with fixed/frozen left column and scrollable body?

    How to make custom shape div, or manipulate divs

    How do I resize images on Android?

    How do I make a div top to be the bottom of other div

    How to create a multiple-row section with auto-sized columns

    CSS: How to omit the spacing between an h3 and a p element?

    how to fix menu bar css-adapter stuffs with IE

    how to avoid duplicate css when using vendor prefixes?

    How to create a two column layout

    How to add two class styles to anchor tag

    How to reuse and override Css style?

    how to set the css left property of a class on the basis of an ID of a tag

    How to make a div take the remaining height without knowing the height?

    How to change a button data-icon size

    How to make a div a link as it transitions in CSS

    How to reach CSS zen?

    How to let the chrome forget the page scroll position?

    Custom Javascript and css added to Wordpress, however, still not working

    How to break a word with two 50% table cells?

    how can resize the page? [closed]

    How can I debug twitter bootstrap v4-alpha grid? col-sm-offset-* not working

    css: how to vertically align table within div

    How to show “next”, “previous” buttons on an image (on mouseover)?

    tooltip pointer is showing downwards to the left of the hyper link