div with float next to div with width

I have html:

<div class="field-label"><label>Email: </label></div>
<div class="field">开发者_StackOverflow中文版<input class="input" ......></div>

and piece of css:

.field-label  { clear:left; float:left; padding:0.5em; width:6em;  }
.field { padding:0.5em; }

And it worked fine. But for some elements I wanted to apply following change: when I add width to .field class layout goes to blazes: element with .field class appears under element with field-label class. Container of whole form is width enough to hold elements with field-label & field class.

Why is it happening, did I miss something in css basics?

Thanks ,Pawel

Did you take into account that padding, margin etc. is not included in width?

You might be better off using spans instead of divs for this layout, as spans are inline elements they might behave better than divs. Also, do you have a live example?

If the label and the field should appear on one line, you have to have a around the two 's witn an explicit width wide enought to contain the two others.