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

use a "left" and a "right" class, and make them float:left and float:right, respectively. The text would then go in a <div class="right">, and the attribute name in a <div class="left">.

Answer 3

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.

Answer 4

I have a couple of sources I use all the time:

http://jeffhowden.com/code/css/forms/ http://www.webdesignermag.co.uk/tutorials/make-your-forms-beautiful-with-css/ http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/ http://www.webcredible.co.uk/user-friendly-resources/css/css-forms.shtml

Here's the one I go to the most:

http://nidahas.com/2006/12/06/forms-markup-and-css-revisited/

Your forms will look awesome, and blend right into the rest of your site design!

Answer 5

Hi. I have the same problem as the guy at the top. All my text boxes are not lining up vertically. I have tried using TAP on the keyboard but the boxes are all over the place. I have tried to use table but when i do that i cannot hight the box and for example 'Name' to give a ID using the Lable button as it highlight the tables rather than then text box and the 'Name'.

I am using Frontpage 2003. I dont know if this has CSS as i tried the coding above and i am new to this web design. Can someone tell me how to line up all my boxes. Many thankz