Positioning Fieldset Elements Under Others

Question

I downloaded a website template and I am attempting to make some changes to the way that part of it is displayed. The default formatting is fine for most input boxes, but when trying to make a few small changes I completely break it.

The IP Allocation fields are fine. For Inventory I am attempting to combine the Fieldsets to not have the gap in between the two boxes, but any changes I make result in this broken CSS. The red lines show where I am expecting these to be but can't figure out how to position them correctly.

                <fieldset style="width:30%; float:left; margin-left: 19%; margin-right: 2%;"> <!-- to make two field float next to one another, adjust values accordingly -->
                    <label>IP Allocation</label>
                    <input type="text" style="width:92%;">
                </fieldset>
                <fieldset style="width:30%; float:left;"> <!-- to make two field float next to one another, adjust values accordingly -->
                    <label>IP Allocation</label>
                    <input type="text" style="width:92%;">
                </fieldset><div class="clear"></div>

                <p><div align="center"><h2>Inventory</h2></div><p>

                <fieldset style="width:62%; float:left; margin-left: 19%;"> <!-- to make two field float next to one another, adjust values accordingly -->
                    <label>Type</label>
                    <input type="text" style="width:25%; float:left; margin-right: 2%;">
                    <label>Item</label>
                    <input type="text" style="width:25%; float:left;">
                </fieldset><div class="clear"></div>

UPDATE

After some modifications to the code and styles, I was able to get it close to the target layout. However, is it "legal" to do 2 labels and then 2 inputs? Can this be fixed to position more precisely?

                <fieldset style="width:62%; float:left; margin-left: 19%;"> <!-- to make two field float next to one another, adjust values accordingly -->
                    <label style="width:45%;">Type</label>
                    <label style="width:45%;">Item</label>
                    <input type="text" style="width:45%; clear: left;">
                    <input type="text" style="width:45%;">
                </fieldset><div class="clear"></div>

Answer 1

You shouldn't have to float the input elements since they're contained in the floated fieldset.

You can fix this by just removing the input float (so it displays as block) or clear: left with the label.

Answer 2

remove all the inline style and do this:

Note: that I trimmed a little off the width of the input to compensate for the border on the input

[http://jsbin.com/ohajox/1/][1]

label { width:10%; float:left; }

input { width:38%; float:left;

}