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

:)