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

Question

Hi

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>    
        <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

Answer 1

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

Answer 2

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

Answer 3

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 :-)

Answer 4

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...