fieldset same line

Question

I have 2 fieldsets:

<fieldset> first fildset </fieldset>

<fieldset> second fieldset </fieldset>

how can I place them in same line?

Answer 1

You can set their display css property to inline:

<style type="text/css">
  fieldset.inline {
    display: inline;
  }
</style>

<fieldset class="inline"> first fildset </fieldset>
<fieldset class="inline"> second fieldset </fieldset>

Here's how the result looks: http://jsbin.com/aseyej/1/edit

Answer 2

Place them in a div container.

<style type="text/css">
    .container {
    height:100px;
    width:600px;
    background-color:gray;       
}
.left {
    float:left;
    width:200px;
    background-color:blue;
}
.right {
    float:right;
    width:400px;
    background-color:red;
}
</style>

<div class="container">
    <div class="right"><fieldset> first fildset </fieldset></div>
    <div class="left"><fieldset> second fieldset </fieldset></div>
</div>

Answer 3

You could also use display:inline;

Answer 4

feldset is a block level element so normally is appears in two blocks in page layout so to put them in a line there are many possibilities for instance you can:

a. put display: inline-block in style sheet for fieldsets.

b. float one of fieldsets to left or right of other one ie. float: left

c. make them absolute or relatively positioned ie. position: absolute and set appropriate top and left

there are also other ways but these three are applicable in most cases.

Answer 5

Place them in table .as

<table>
   <tr>
     <td>
       <fieldset>
          first fildset
       </fieldset>
     </td>
     <td>
       <fieldset>
          second fieldset 
       </fieldset>
    </td>
</table>

FIDDLE is here