HTML，CSS问题：HTML字段集的放置/定位

Question

I have a HTML page with personal information details using text boxes. I have two fieldsets as in

this Jsfiddle .

As noticed that the fieldsets are placed up and down position. My question is that

How can I placed these two fieldsets side by side (left & right position)?

Thank you

Answer 1

I removed the form width: 40%; and assigned a float:left; property on those fieldsets. Here is the corrected fiddle: Try me

Answer 2

Remove width:40% from form & give float to your fieldsets .

Check this: http://jsfiddle.net/XdRYT/8/

Answer 3

Simplest solution is create table with two cells and one row and place each fieldset in different cell. Another bit more complicated is to use CSS to format it.

Answer 4

Change fieldset stye to below

  fieldset {
            border: 1px dotted #61B5CF;
            margin-top: 1.4em;
            padding: 0.6em;
            float:left;
            width:40%;
           }