div with float next to div with width

Question

Hi,

I have html:

<div class="field-label"><label>Email: </label></div>
<div class="field"><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

Answer 1

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?

Answer 2

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.

Answer 3

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