How to control the postioning of a fieldset with css?

Holly picture Holly · Jul 29, 2009 · Viewed 25.6k times · Source

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?

Answer

Zack Marrapese picture Zack Marrapese · Jul 29, 2009

Since fieldsets are considered blocks, you need to use

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

Or whatever you want for the width of the fieldsets.