CODEWITHSUNDEEP
htmlcss
NibblyPig
NibblyPig

Reputation: 52952

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

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?

Upvotes: 10

Views: 21114

Answers (3)

Paul
Paul

Reputation: 2581

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.

Upvotes: 1

Daniel A. White
Daniel A. White

Reputation: 190976

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;
}

Upvotes: 18

xtofl
xtofl

Reputation: 41519

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">.

Upvotes: 0

Related Questions