How do I line up my textboxes without using a table? html/css

Question

I want to display:

Name [Textbox]
Age: [Textbox]
BlahBlahCatfish: [Textbox]

but if I simply plonk the code in, it gets lined up exactly as its lined up above.

What I want is for it to be lined up like this:

Name:            [Textbox]
Age:             [Textbox]
BlahBlahCatfish: [Textbox]

Ordinarly I would use a Table but I am trying to get out of that habit and use lovely CSS. Ideas of how to do this without billions of divs and stuff?

Answer 1

Here is a site I did that does that.

http://acm.cs.kent.edu/contact/form.php

Basically its like this

<p>
    <label for="someTextBox" >Text</label>
    <input type="text" id="someTextBox" />
</p>

p label {
    display: inline-block;
    width: x;
}
p input {
    width: y;
}

Answer 2

I use the 960 Grid System to handle form based layout, in particular I found the Fluid 960 Grid System most useful.

It's a simple and structured approach to layout, worth investing a little time to learn this as it will save you so much time in the future.

Another handy tool is the Gridder bookmarklet to aide layout.

There are other CSS frameworks such as Blueprint which are equally as good.