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 to deal with `rowspan` and background colors within a table?

    Search type links in Yahoo - how to implement similar behaviour

    How to set height to wrap text only in certain screen size

    How to call external CSS in presence of inline and internal?

    How can I make Non-English quotation marks with a help of CSS? [closed]

    How to get the rotation of degree with getBoundingClientRect?

    How to change css class according to the name attribute of a parent

    How to remove free jqgrid own horizontal scrollbar if autowidth:true is used

    How to change width of

    Yet another person asking how to center a navigation bar

    HTML/CSS | How to place different elements in a header div to different positions?

    Jquery Mobile CSS Android Styling Boarders Not Showing On Button

    How to remove space after div in my td when one div uses “relative” position?

    how to display an image on small screens and videos on large screen in html

    How to determine if width has px or %

    Space on Navigation right and left…how to remove it?

    How to place an image properly with CSS

    How to make a thicker text shadow using css?

    How can I create CSS sprites from images stored in the database?

    CSS - How to control the gap between background image and container

    How to use different kind of Google Font types?

    Django + Mac osx how to use less css?

    Mobile Toggle Menu - How to Push Content outside the view of the viewport?

    How to create a pulsing glow ring animation in CSS?

    How can I make responsive image take up 100% of its parent's height?

    How to apply style to the divs that are added dynamically?

    CSS3 Menu Layout and Gradient not showing

    How to position AdSense on site with CSS position: absolute

    How to dynicamlly center the center of a div based on screen size

    How to fix some issues with printing very basic HTML