Webmaster Forum / HTML, CSS, Scripts / CSS / November 2007

Hi,

I'm mainly a coder, PHP at the moment, but from time to time need to
design and use some css.

I've a css text alignment issue. Mostly to align text neatly in the past
I've used tables. But now I know I should be getting into the 21st C and
using css properly.

Here are 2 mock up pages with some forms on them, obviously I want the
text boxes aligned neatly. The first page shows a nice alignment, the
second does not, take a look.

http://tinyurl.com/2ef9o5
http://tinyurl.com/27rf4e

My form alignment uses 2 css entries:

ItemLeft
{
position: relative;
left: 10px;
}

ItemRight
{
position: relative;
left: 75px;
}

To achieve the first page -the one neatly aligned- I used a fixed-width
font (Courier New), and then added multiple entries so that the number
of chars in the text on the left is the same, so that the alignment of the
text boxes is neat.

EG.

<FormItemLeft>
Subject:
</FormItemLeft>

<FormItemRight>
<input name="subject" type="text" /> <br />
</FormItemRight>

<FormItemLeft>
CC:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</FormItemLeft>

<FormItemRight>
<input name="cc" type="text" /> <br />
</FormItemRight>

Here you can see for the <FormItemLeft> entries 'Subject:' is 8 chars and
'CC:' is 3, so I've added 5 &nbsp; entries after 'CC:'.

Obviously this is a work-around which is rather amateurish and it does not
work with non-fixed-width fonts. My instinct was to use a table, but this
is exactly what css is supposed to stop.

How do I get my alignment to work with non-fixed-width fonts, no forced
spaces, and no tables? I just can't seem to find the right way to do this.

Thanks all.