div and textboxes are not aligning at same position when text change - css

Question

Few hour ago I have asked question that for to align 2 text boxes in line.
But now problem is text boxes are aligned and I have put select list in side of each text box.
but problem is that when I change the label or text before text box all formation disturbed and it's not aligning in same format.
I want that whatever the text I write before text box, the position of text box should not change. (ONE TEXT BOX SHOULD BE AT SAME POSITION UNDER ANOTHER ONE)
fiddle demo
code :
.divkl {
display: inline;
margin: 20px;
}
.blockl{
width: 100%;
display: block;
padding:3px;
}
.txt_prd_add
{
width:100px;
border-radius:0px !important;
margin-left:10px;
margin-top:4px;
}
.select_prd
{
width:85px;
margin-top:4px;
}

Answer 1

Wrap all of the labels in <label></label> and then apply a fixed width and display: inline-block to the label via CSS. If you want to prevent the elements from wrapping when the browser is resized add white-space: nowrap; to .block1 and .divk1
HTML
<div class="blockl">
<div class="divkl">
<label>Material</label>
<input type="text" class="txt_prd_add">
<select class="select_prd">
<option>GB</option>
<option>MB</option>
<option>GHz</option>
</select>
</div>
<div class="divkl">
<label>Color</label>
<input type="text" class="txt_prd_add">
<select class="select_prd">
<option>GB</option>
<option>MB</option>
<option>GHz</option>
</select>
</div>
</div>
<div class="blockl">
<div class="divkl">
<label>Size</label>
<input type="text" class="txt_prd_add">
<select class="select_prd">
<option>GB</option>
<option>MB</option>
<option>GHz</option>
</select>
</div>
<div class="divkl">
<label>Type</label>
<input type="text" class="txt_prd_add">
<select class="select_prd">
<option>GB</option>
<option>MB</option>
<option>GHz</option>
</select>
</div>
</div>
CSS
label{
width: 50px;
display: inline-block;
}
.divkl {
display: inline;
margin: 20px;
white-space: nowrap; /* Prevents wrapping */
}
.blockl{
width: 100%;
display: block;
padding:3px;
white-space: nowrap; /* Prevents wrapping */
}
JS Fiddle: http://jsfiddle.net/u7aTD/7/

Answer 2

DEMO
<label class="title">Material</label>
.title {
display: inline-block;
width: 80px;
}

Answer 3

Demo: http://jsfiddle.net/abhitalks/u7aTD/6/
You would better wrap your text in labels, e.g.:
<div class="divkl">
<label>Material</label>
<input type="text" class="txt_prd_add">
...
And, then apply css to the labels, e.g.:
label { display: inline-block; width: 10%; }
.txt_prd_add { width:10%; ...
.select_prd { width:10%; ...
The problem you are having is with the widths. It would be better if you first apply widths in percentages to check it out, and then tweak it according to your design.

Answer 4

You can use tables insted of divs , as to get proper aling.`
Material
GB
MB
GHz
Color
GB
MB
GHz
<tr class="divkl"><td>Size</td>
<td>
<input type="text" class="txt_prd_add">
<select class="select_prd">
<option>GB</option>
<option>MB</option>
<option>GHz</option>
</select>
</td>
</tr>
<tr class="divkl">
<td>Type</td>
<td>
<input type="text" class="txt_prd_add">
<select class="select_prd">
<option>GB</option>
<option>MB</option>
<option>GHz</option>
</select>
</td>
</tr>
</table>
</div>`