How to align text fields in div

Question

I am trying to align text fields in a div and make them float left so that they look like a table.

I want a layout like below:

Label1: TextField    Label2: TextField     Label3: TextField
Label4: TextField    Label5: TextField     Label6: TextField

I tried to do this but it just won't come out correct. http://jsbin.com/izuwi3/edit

Answer 1

I put this together really quickly, so it can definitely be improved upon, but how about something like this?

http://jsfiddle.net/LBcp5/1/

What I'm doing is essentially creating a container for what would be a row in a table. The way I'm doing this is as follows:

<div class="row">
   // put whatever you want in here
</div>

... and I'm styling this row class with clear: both so that each row will be on its own line. You can add <div> elements within each row, as many as you want, and floating them to the left or using display: inline to get the effect you want.

So when you want multiple rows, you create multiple of these row containers. Check out the jsFiddle demo above for an example.

I hope this helps.

Answer 2

Maybe you are looking for something like this ?

HTML:

<form>
    <div id="wrapper">
        <div id="left">
            <div class="label-container">
            <label for="label1">Label1</label>
            <input name="label1" type="text">
            </div>
            <div class="label-container">
            <label for="label4">Label4</label>
            <input name="label4" type="text">
            </div>
        </div>
        <div id="center">
            <div class="label-container">
            <label for="label2">Label2</label>
            <input name="label2" type="text">
            </div>
            <div class="label-container">
            <label for="label5">Label5</label>
            <input name="label5" type="text">
            </div>
        </div>
        <div id="right">
            <div class="label-container">
            <label for="label3">Label3</label>
            <input name="label3" type="text">
            </div>
            <div class="label-container">
            <label for="label6">Label6</label>
            <input name="label6" type="text">
            </div>
        </div>
    </div>
</form>

CSS:

#wrapper
{
    width: 800px;
}

#left,
#center,
#right
{
    float: left;
}

.label-container
{
    margin: 10px 10px;
}

:)

Answer 3

Well, you can for example put each column in a fieldset tag, set it's display attribute to block , float to left and set width to desired value.

i think it'll allways end using some tag like span or div to group those fields, however the fieldset tag is the most desired one cause it's invented exactly for grouping form fields :)

Answer 4

you can do this:

<div style="clear:both;">
    <div style="float:left;">
        <label for="TextField1">Label1:</label>
        <input id="TextField1" value="TextField"></input>
    </div>
    <div style="float:left;">
        <label for="TextField2" style="padding-left:50px">Label2:</label>
        <input id="TextField2" value="TextField"></input>
    </div>
    <div style="float:left;">
        <label for="TextField3" style="padding-left:50px">Label3:</label>
        <input id="TextField3" value="TextField"></input>
    </div>
</div>
<div style="clear:both;">
    <div style="float:left;">
        <label for="TextField4">Label4:</label>
        <input id="TextField4" value="TextField"></input>
    </div>
    <div style="float:left;">
        <label for="TextField5" style="padding-left:50px">Label5:</label>
        <input id="TextField5" value="TextField"></input>
    </div>
    <div style="float:left;">
        <label for="TextField6" style="padding-left:50px">Label6:</label>
        <input id="TextField6" value="TextField"></input>
    </div>
</div>

Answer 5

Use this html tag

align="center"

center can be substituted for left or right if you want not to position them on the center

The proper way to do it is by linking your html to a CSS file and assign each div to a certain type of class in the CSS file, this helps you avoid redundancy. To do so create a css file and link it to the html by including this in your html code

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

And then in your mystyle.css file you would have to include something like this

DIV.Left{text-align:left;}
DIV.Center{text-align:center;}
DIV.Right{text-align:right;}

Then your html file divs would look like

<div class="left"></div>
<div class="center"></div>
<div class="right"></div>