Question

I have achieved nice a two column layout form with the help of CSS wiht the help of the following guide.

http://articles.sitepoint.com/article/fancy-form-design-css

My markup looks roughly like

<form>
  <fieldset> 
    <legend>
      <ol>
        <li>
           <label>
           </label>
           <field>
           <field>
        </li>
        <!-- more fileds -->
      </ol>
  </fieldset>

  <fieldset>
     <!-- similar -->
  </fieldset>

</form>

This creates a nice two column layout. What I would like to achieve is that instad of placing the fieldsets one after the other vertically, place them side by side. This should give me a four column layout.

How can I achieve this ?

Answer 1

In your CSS:

fieldset { display: inline; }

The <fieldset> element is a block-type by default. Changing it to inline will make them sit next to each other.

You can also achieve this effect with float: left; but that may cause other layout issues.