on IE7 span create "newline"? - html

Question

I have this code :
<div class="richiedi_info_item">
<label>Message</label>
<span style="color:Red;"> *</span>
<div class="richiedi_info_item_nota">
<a id="notaInfo" href="javascript:void(0);">Click</a>
</div>
</div>
.richiedi_info_item_nota
{
float:right;
width:252px;
}
.richiedi_info_item
{
margin-top:15px;
width:400px;
}
.richiedi_info_item label
{
float:left;
height:16px;
line-height:20px;
}
and (on every browser expect IE7) the text Message and the link Click is aligned on the same line. Seems that span (with the red *) create a new line.
Why? And how can I fix this problem?

Answer 1

You can remove the floats (left and right) and set the div to display:inline, like this:
.richiedi_info_item_nota
{
display:inline;
width:252px;
}
.richiedi_info_item label
{
height:16px;
line-height:20px;
}
EDIT:
IE7 Does not handle floats very well, especially with inline elements (span and label) so I added another div around both of the items and floated it.
HTML
<div class="richiedi_info_item">
<div id="floating">
<label>Message</label>
<span style="color:Red;"> *</span>
</div>
<div class="richiedi_info_item_nota">
<a id="notaInfo" href="javascript:void(0);">Click</a>
</div>
</div>
CSS
.richiedi_info_item_nota
{
width:21px;
clear:both;
float:right;
}
.richiedi_info_item
{
margin-top:15px;
width:400px;
}
.richiedi_info_item label
{
height:16px;
line-height:20px;
}
#floating {
float:left;
}
WORKING EXAMPLE
JsFiddle Demo