align label and input (float vs display inline block) - html

Question

I have two examples of a label and a text field that I'm trying to align (You can see it in this fiddle). In the first example I have a label and a text field like this:
<label for="firstname" style="width:100px;display:inline-block;background-color:red;">Firstname: </label>
<input type="text" style="margin:0;padding:0;" id="firstname" name="firstname" value="" />
In the second example, I have a label and a three floated text fields in a div like this:
<div>
<div style="width:100px;float:left;background-color:red;">Date: </div>
<div>
<div style="float:left;">
<input type="text" style="margin:0;padding:0;" id="day" name="day" maxlength="2" size="2" value="" /> / <br />
<label for="day">Day</label>
</div>
<div style="float:left;">
<input type="text" style="margin:0;padding:0;" id="month" name="month" maxlength="2" size="2" value="" /> / <br />
<label for="month">Month</label>
</div>
<div style="float:left;">
<input type="text" style="margin:0;padding:0;" id="year" name="year" maxlength="4" size="4" value="" /><br />
<label for="year">Year</label>
</div>
</div>
</div>
As you can see above, I give each label a width of 100px, but for some reason, in the second example, there is no space between my label and the first text field. Does anybody know why this is happening and why my width of 100px does not seem to have any effect in my second example (view fiddle link above).
Thank you

Answer 1

You can use inline-block instead of float to make it appear as of the previous section to get the margin effect else you need to add a margin with floated element.
<div style="width:100px;display:inline-block;vertical-align:top;background-color:red;">Date: </div>
<div style="display:inline-block;">
<div style="display:inline-block;">
<input type="text" style="margin:0;padding:0;" id="day" name="day" maxlength="2" size="2" value="" /> / <br />
<label for="day">Day</label>
</div>
<div style="display:inline-block;">
<input type="text" style="margin:0;padding:0;" id="month" name="month" maxlength="2" size="2" value="" /> / <br />
<label for="month">Month</label>
</div>
<div style="display:inline-block;">
<input type="text" style="margin:0;padding:0;" id="year" name="year" maxlength="4" size="4" value="" /><br />
<label for="year">Year</label>
</div>
</div>
Demo
or add a margin.
<div style="width:100px;float:left;margin-right:4px;background-color:red;">Date: </div>
Demo
On a side note, consider using css rules instead of inline styles

Answer 2

The space is because the first element is a replaced inline element, which kinda has the same behaviour as inline-block and adds margin.
And for the width, remove size="2" and maxlength="2" to make it the same with as the upper input fields

Answer 3

Well first of all your first example with the "Firstname" label is using a "label" tag which is treated differently then a "div". That brings me to the second example of "Date" which is surrounded by "div" tags. Because of this, the default way for the browser to handle them is different.
You could easily compensate for this difference by adding a right margin to the label using the "div" to surround it.
<div style="width:100px;float:left;background-color:red; margin-right:5px;">Date: </div>
Although it is ok to use inline styles, I would suggest if you are going to be using this in a larger document to put this inside a external CSS file and use a class (or ID) for the div instead.