Search code examples
htmlcssformspositioningfieldset

How to control the postioning of a fieldset with css?


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

  • Since fieldsets are considered blocks, you need to use

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

    Or whatever you want for the width of the fieldsets.