3 Column form layout with DIV

Question

I want to create a form with 3 columns using Div,

Label : Textbox     Label : Textbox    Label : Textbox
Label : Textbox     Label : Textbox    Label : Textbox

If someone can help me, I would appreciate it.

Note: The label will be in multilingual, the text could be longer in other language.This is the major problem I see with div method. If the label is longer, the textbox will automatically go under the label and this is not correct .

<style>
.wrapperField{
    float:left;
    width:200px;
}
</style>
<div class="wrapperField">
    <Label .....
    <input type="text....
</div>

<div class="wrapperField">
    <Label .....
    <input type="text....
</div>

<div class="wrapperField">
    <Label .....
    <input type="text....
</div>

Answer 1

Please try the following layout

<style>
.wrapperField {
    float: left;
    width: 200px;
    overflow: hidden;
}

.wrapperField label {
    float: left;
    margin-right: 10px;
}

.wrapperField input, .wrapperField textarea {
    float: right;
}
</style>

Answer 2

we'll the textbox is going under the label because you have set a fixed width of 200 px on that div. so if it exceeds 200px he will push it down. it's a normal behaviour

and I don't think using overflow:hidden will help. Better use 2 columns

Answer 3

<style>

.wrapperField {
    float:left;
    width:200px;
    margin-left:10px;
}

.wrapperField label{
    float:left;
    margin-right:10px;
    width:90px;
    overflow:hidden;
    white-space:nowrap;
    text-align:right;
}

.wrapperField input, .wrapperField textarea {
    float:left;
    width:100px;
}

</style>



    <div class="wrapperField">
        <label>testfasdf  asd asd  as ff er</label>
        <input type="text" />
    </div>

    <div class="wrapperField">
        <label>test asdf asdf asdf asdf asdf </label>
        <input type="text" />
    </div>

    <div class="wrapperField">
        <label>test</label>
        <input type="text" />
    </div>

    <br style="clear:left;" />

    <div class="wrapperField">
        <label>test</label>
        <input type="text" />
    </div>

    <div class="wrapperField">
        <label>test</label>
        <input type="text" />
    </div>

    <div class="wrapperField">
        <label>test</label>
        <input type="text" />
    </div>

@mmanco I do change on your solution . It's working great now. Thanks again for your help. I'll never think to use the overflow properties. I Just put the overflow properties on the Label and specify a width on the label.