CSS Issue - Trying to get HTML elements to stay on one line

I'm trying to achieve a layourt like: Search (gif) : TextBox : AjaxLoader (gif) on one line.

I have the following style:

<div>           
        <img src='<%= VirtualPathUtility.ToAbsolute("~/Content/Images/search.gif")%>' alt="Search"/>&nbsp            
        <%= Html.TextBox("SearchTextBox", string.Empty, new { style = "float:left;" })%>   
        <div id="LoadingGif" style="float:left;"></div>    
    开发者_如何学JAVA    <div style="clear:both;"></div>      
</div>  

The search image is on one line and the textbox and loading gif appear on the next line.

Can anyone help please?

Thanks in advance

The last two elements are floated left, but the search gif isn't.

I removed the outer div and floated all elemets left - this works. Thanks for all your help + 1 to all.

An <img /> and <input type="text" /> will be display:inline by default so shouldn't need float:left.

And you might be better off replacing your <div id="LoadingGif" style="float:left;"></div> with either a tag or an tag: then you'll have 3 inline elements meaning you can remove the surplus <div style="clear:both;"></div> from your HTML :-)

Replacing divs by spans as such:

<div>           
        <img src='<%= VirtualPathUtility.ToAbsolute("~/Content/Images/search.gif")%>' alt="Search"/>&nbsp            
        <%= Html.TextBox("SearchTextBox", string.Empty, new { style = "float:left;" })%>   
        <span id="LoadingGif" style="float:left;"></span>    
        <span style="clear:both;"></span>      
</div>

would work...