Search field is showing out of layout inside my asp.net mvc web application

Question

I have the following inside my razor view:-

<div style="float:right">
@using (Ajax.BeginForm(
new AjaxOptions
{
    HttpMethod = "get",
    InsertionMode = InsertionMode.Replace,
    LoadingElementId = "progress",
    UpdateTargetId = "customerTable"
}))
{
<text>Search</text>  <input placeholder="Search by name.." name="searchTerm" type="text" data-autocomplete-source= "@Url.Action("AutoComplete", "Customer")" /> 
<input class="btn btn-success" type="submit" value="search" />
<img src="~/Content/Ajax-loader-bar.gif" class="loadingimage" id="progress" />
}
</div>  
<div id="customerTable">
@Html.Partial("_CustomerTable", Model)
</div>

The layout will show well on IE and chrome,, but it will be out of layout on firefox as shown below:-

So what might be causing this layout fault?

Answer 1

That isn't so much a "layout" fault as much as it's probably a CSS fault. I'm going to guess that you're not floating the "Customer List" area, or it is too wide thus causing the div containing your form to be bumped down because there isn't room.

Try making your "Customer List" title not as wide and/or floating it left and see what happens.