CODEWITHSUNDEEP
htmlcss
Matthew Cox
Matthew Cox

Reputation: 13682

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:</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?

Upvotes: 0

Views: 3295

Answers (4)

pex
pex

Reputation: 7761

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/

Upvotes: 2

andyb
andyb

Reputation: 43823

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.

Upvotes: 0

Seth
Seth

Reputation: 6260

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.

Upvotes: 0

cp3
cp3

Reputation: 2139

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.

Upvotes: 0

Related Questions