Question

In the “old days” we could put everything into td cells and everything lined up very nicely. With this css, I’m kind of lost with how to do some things. The issue I am having is that I would like to take the left side text, pad about 50px on the right side and then use an input tag next to the text. What I am getting though is the input boxes are not even depending on the length of the text. If I used a table design, the td tag would have expanded to the longest text and then all of the inputs to the right would line up great. How can I achieve this with css?

---

Here is my html

  <li class="mainForm" id="fieldBox_2">
    <label class="formFieldQuestion">Caption: <input class=mainForm type=text name=field_2 id=field_2 size='30' value=''>
      <a class=info href=#><img src=imgs/tip_small.png border=0><span class=infobox>please enter the</span></a>
    </label>
  </li>

And the CSS

#mainForm 
{
    position: relative;
    border: 1px;
    border-style: solid;
    margin: 0 auto;
    text-align: left;
    width: 70%;
    background-color: #ffffff;
}
ul.mainForm
{
    list-style-type: none;
    font-family: Tahoma, Arial, Verdana, sans-serif;
    font-size:15px; 
}
li.mainForm
{
    padding-bottom: 10px;
}

label.formFieldQuestion
{
    line-height:125%;
    padding:0 4px 1px 0;
    border:none;
    display:block;
    font-size:95%;
    font-weight:bold;
}

Answer 1

Put the input field description in a label tag and assign a fixed width style to the labels.