How to control the postioning of a fieldset with css?


Tags: html,css,forms,positioning,fieldset

Problem :

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.


    CSS Howto..

    How div automatically adjust their size and positions the element inside it

    How to stop image shrinking when page is resized horizontally in CSS

    How to style dropdown menu using CSS in HTML

    How to overlap two div with css

    How to change active tab to first css

    How to correctly override inaccessible HTML content with CSS?

    How to remove class using CSS

    How to structure elements in jQuery Mobile

    AngularJS / CSS - How to set the width of a select box to a value from $scope?

    Codeigniter--add “active” css class to link, how to?

    How to handle CSS code in my Android email app?

    how to style xml tag attribute with css

    How to trim off Image in CSS?

    How to align center without break the user experience?

    CSS HTML How to align image within div to bottom right

    How can I highlight position in nav bar for single-page website?

    How to embed Javascript in CSS?

    CSS triangle how to remove white space on the right

    How not differ tableview focused rows from other rows?

    Content attribute in CSS to show image icon

    How to make <'details'> drop down on mouse hover

    How to reverse jQuery css styling?

    How to make equal space between boxes in one row via CSS

    How to assign CSS to images which have specific extension, height and width?

    How to adapt a flex div's width to content

    How to make a custom clickable shape with CSS to cover the exact needed area?

    IN IE6, how to position transparent PNG using filter?

    How to rotate element to left and right based on mouse movement using jQuery & CSS

    How to use css image sprites in this code?

    How to make a CSS menu to remain visible after a child has been clicked on