Float Left <UL> list with float right text boxes that are set below the UL list instead of set adjacent

I am just trying to float an unordered list left, and a set of textboxes to the right so that they are adjacent to each other and have a uniform look within a div tag. The issue is that the text boxes are to the right ... but are positioned below the ul items

.PersonLI
{
   float: left;
   clear: both;
   width: 100px;
   margin-bottom: 10px;
}
.PersonBox
{
   float: right;
   clear: both;
   width: 99px;
   margin-bottom: 10px;
}
.FirstObj
{
    border: 1px solid black;
    margin-left: 100px;
    width: 300px;
    height: 200px;
}    
<div class="FirstObj">
   <ul style="list-style: none;">
      <li class="PersonLI">First Name:</li>
      <li class="PersonLI">Last Name:</li>
      <li class="PersonLI">Address:</li>
      <li class="PersonLI">City:</开发者_StackOverflow社区li>
      <li class="PersonLI">State:</li>
      <li class="PersonLI">Zip Code:</li>
   </ul>
   <input id="txtFname" type="text" value="" class="PersonBox"/>
   <input id="txtLname" type="text" value="" class="PersonBox"/>
   <input id="txtAddr" type="text" value="" class="PersonBox"/>
   <input id="txtCity" type="text" value="" class="PersonBox"/>
   <input id="txtState" type="text" value="" class="PersonBox"/>
   <input id="txtZip" type="text" value="" class="PersonBox"/>
</div>

Could it be that I need to NOT clear the float on the last list item?

Your markup is kind of weird. A semantic form adapting your styles would look like this:

.FirstObj ul {
  list-style: none;
}

.FirstObj li {
  margin-bottom: 10px;
  clear: both;
}

.FirstObj label {
  width: 100px;
  float: left;
}

.FirstObj input {
  float: right;
  width: 99px
}

<div class="FirstObj">
   <ul>
      <li>
        <label for="txtFname">First Name:</label>
        <input id="txtFname" type="text" value="" />
      </li><li>
        <label for="txtLname">Last Name:</label>
        <input id="txtLname" type="text" value="" />
      </li><li>
        <label for="txtAddr">Address:</label>
        <input id="txtAddr" type="text" value="" />
      </li><li>
        <label for="txtCity">City:</label>
        <input id="txtCity" type="text" value="" />
      </li><li>
        <label for="txtState">State:</label>
        <input id="txtState" type="text" value="" />
      </li><li>
        <label for="txtZip">Zip Code:</label>
        <input id="txtZip" type="text" value="" />
      </li>
   </ul>
</div>

It's alway a good idea to use labels. Here's the working version: http://jsfiddle.net/Fmzbm/

Is there any specific reason why you are not using <label> tags for these fields?

To answer your CSS question, clear:both is not needed on either of the elements if you want them side by side.

Consider changing your markup:

HTML: First Name:

CSS:

.FirstObj label { float:left; } .FirstObj input { float:right; }

The code hinting is jacked up, need to try some more formatting.

Demo http://jsfiddle.net/qnev2/

You may want to change the fixed width of the li CSS rule to suit your needs but also change the markup and use the more semantically correct label tag. This also avoids the float property which in my experience can lead to undesirable behaviour if the HTML is re-flowed.