Back in the "good old days," we used to simply put everything into td cells and it would all line up perfectly. Now, with CSS, things are a bit more complicated. I'm struggling with how to achieve a specific layout. What I want is to have text on the left side with about 50px of padding on the right, followed by an input tag next to the text. The problem is that the input boxes don't align properly based on the length of the text. If I were using a table design, the td tags would expand to accommodate the longest text, resulting in perfectly aligned inputs to the right. How can I replicate this behavior using CSS?
Here is the HTML snippet:
<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 here's the relevant 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;
}