How can I align one element directly below another?

Get Started
1

I have the following code for two input areas. I want the “MM/CCYY” to line up
directly under the boxes on the screen.


<table>
<tr><td>
<b>From: </b><input name="Addr1From" value="" size="10"<br>
MM/CCYY
</td>
<td>
<b>To: </b><input name="Addr1To" value="" size="10" <br>
MM/CCYY
</td></tr>
</table>

I have tried various combos of spaces and  
but that isn’t accurate enough and requires too much type-and-try.
There has to be an easier way!!

Thanks for any help!
Dennis

2

Rather than use the meaningless <b> for the form labels, use <label> tags instead.
(If you put eg <label for=“AddrlFrom”> then the label will be linked to the form input, which makes the form easier to use, particularly for people using assistive technology.

In your stylesheet, you can then have the line
label {width:5em; font-weight:bold; display:inline-block;}
and adjust the width until you find one that’s suitable.

(I’d also have to question why you’re using table elements, given that it doesn’t look you’ve got any need for a table there)

3

Stevie;

Thanks for the tips. I’ll probably use them for new things I add.

I stripped out all the junk from my code so it was easier to see.
The actual form is over 2200 lines of html and is all tables! Fortunately
I don’t have to make any major changes to it.

Thanks again!
Dennis