CODEWITHSUNDEEP
csswidth
dragonfly
dragonfly

Reputation: 17773

div with float next to div with width

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

Upvotes: 0

Views: 299

Answers (3)

Tgr
Tgr

Reputation: 28160

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

Upvotes: 1

Edelcom
Edelcom

Reputation: 5058

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.

Upvotes: 0

Kyle
Kyle

Reputation: 67184

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?

Upvotes: 0

Related Questions