How to control the postioning of a fieldset with css?

Question

I have the following code:

<fieldset>
    <legend>
        <strong>Personal Information</strong>
    </legend>
    <ul>
        <li>
            <label for="first_name">First Name</label><br />
            <input type="text" id="first_name" name="first_name" value="" maxlength="30" />
        </li>
        ...
    </ul>
</fieldset>
<fieldset>
    <legend>
        <strong>Car Information</strong>
    </legend>
    <ul>
        <li>
            <label for="car_make">Make</label><br />
            <input type="text" id="car_make" name="car_make" value="" maxlength="30" />
        </li>
        ...
    </ul>
</fieldset>

Right now everything is on the left hand side where the second fieldset (car information) is right below the first fieldset (personal information).

I would like the car information fieldset to be on the right hand side of the personal information fieldset so they are side by side. Using css, how would I do this?

Solution 1

Since fieldsets are considered blocks, you need to use

fieldset {
    width: 200px;
    float: left;
}

Or whatever you want for the width of the fieldsets.

Solution 2

fieldset {
  -moz-border-radius:5px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  width: 200px;
  float: left;    
}

Solution 3

What they said, but you can also float the car information right, which gives you the advantage of always being flush against that edge no matter the width, if that's important.

Solution 4

If you assign a width to your fieldsets and float the to the left, something like this:

HTML:

<fieldset class="myFieldSet">
    <legend>
        <strong>Personal Information</strong>
    </legend>
    <ul>
        <li>
            <label for="first_name">First Name</label><br />
            <input type="text" id="first_name" name="first_name" value="" maxlength="30" />
        </li>
        ...
    </ul>
</fieldset>
<fieldset class="myFieldSet">
    <legend>
        <strong>Car Information</strong>
    </legend>
    <ul>
        <li>
            <label for="car_make">Make</label><br />
            <input type="text" id="car_make" name="car_make" value="" maxlength="30" />
        </li>
        ...
    </ul>
</fieldset>

CSS:

.myFieldSet
{
width:300px;
float:left;
}

Solution 5

What you can do is float both fieldsets to the left. The css would look like this:

fieldset {
    float: left;
    width: 200px;
}

This is going to effect every fieldset on the page, so if you want to isolate only specific fieldsets use css classes:

<style>
    .FloatLeft { float: left; width: 200px;}
</style>

<fieldset class="FloatLeft">

View more solutions