Question

I have this code :

<div class="richiedi_info_item">
    <label>Message</label>
    <span style="color:Red;">&nbsp;*</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;">&nbsp;*</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