float does not align div elements properly - css

Question

HTML:
<div class="table" style="display:table;width:600px">
<div style="display:table-row">
<div style="width:30%;float:left;display:table-cell">Flow ID</div>
<div style="width:60%;float:right;display:table-cell">
<input type="text" name="flowid" size="20" id="flowid"/>
</div>
<div style="width:10%,float:right;display:table-cell"> [Default : 32] </div>
</div>
<div style="display:table-row">
<div style="width:30%;float:left;display:table-cell">Traffic Class</div>
<div style="width:60%;float:right;display:table-cell">
<input type="text" name="traffic" size="20" id="traffic"/>
</div>
<div style="width:10%;float:right;display:table-cell"> [Default : 0] </div>
</div>
</div>
CSS:
div.table {
font: 81.25%/1 arial,helvetica,sans-serif;
font-weight:bold;
background-color:rgb(241,241,241);
margin: 0 auto;
width: 50%;
text-align:center;
border-width: 1px 1px 1px 1px;
border-style: solid;
border-color: rgb(229, 229, 229);
}
Output I am getting is :
Why this strange behaviour ?
Althoguh first row seems to be correctly organized but still table-cell elements are not aligned completely to left and right. For second row, I have no clue what's going on ?
I am new in using divs as I used to do all these things with tables so please excuse if missing something trivial.

Answer 1

There is no need for the floats and you also had a typo in one of the inline styles:
width:10%,float:right; should be width:10%;float:right;.
Here is it working:
http://jsfiddle.net/sQ4Nb/
Here is how you should have your code:
http://jsfiddle.net/cS35y/
And here is a HTML table version:
http://jsfiddle.net/53fKu/

Answer 2

Why do you use div elements if you decide to display them like a table?
You may try something like this: jsfiddle
<ul id="wrapper">
<li>
<div style="width:30%;" class="cell">Flow ID</div>
<div style="width:55%;" class="cell">
<input type="text" name="flowid" size="20" id="flowid" />
</div>
<div style="width:15%;" class="cell">[Default : 32]</div>
</li>
<li>
<div style="width:30%;" class="cell">Traffic Class</div>
<div style="width:55%;" class="cell">
<input type="text" name="traffic" size="20" id="traffic" />
</div>
<div style="width:15%;" class="cell">[Default : 0]</div>
</li>
</ul>
#wrapper {
width: 600px;
list-style: none;
}
.cell {
float: left;
}