Keep Elements on Same Horizontal 'Row'

Question

I have the following div in a page, but the button is being rendered below the input, despite there being plenty of room for them both in the same 'row' as I want them. How can I force this 'same row' issue?

<div id="pageHeader" style="text-align: right;">
    <asp:TextBox ID="searchInput" runat="server" CssClass="searchTerm">
    </asp:TextBox>
    <asp:Button ID="searchButton" runat="server" CssClass="btn" Text="Search" onclick="searchButton_Click" />
</div>

NEW: This issue was due to the fact that I'm using telerik ajax here, and had included searchInput as an updated control in the ajax settings of my RadAjaxManager. This control 'wraps' all of its updated controls in block displayed divs by default. I just had to override this default as follows:

protected void ajaxManager_AjaxSettingCreating(object sender, Telerik.Web.UI.AjaxSettingCreatingEventArgs e)
{
    e.UpdatePanel.RenderMode = UpdatePanelRenderMode.Inline;
}

Answer 1

By default, input elements render with display:inline, which makes them appear in line :) However, in your case it seems that something is breaking the default behavior, so you will need to explicitly specify that you want display:inline instead of display:block. So, to sum up:

You can use the following CSS to obtain the desired view:

#pageHeader input
{
   display:inline !important;
}

Answer 2

Thank you so much for the code. It worked great. Telerik Ajaxmanager was the problem.

protected void ajaxManager_AjaxSettingCreating(object sender, Telerik.Web.UI.AjaxSettingCreatingEventArgs e)
{
    e.UpdatePanel.RenderMode = UpdatePanelRenderMode.Inline;
}

Answer 3

You can also change your existing div to be an asp:Panel that gets updated by the RadAjaxManager (rather than the individual control(s)):

<asp:Panel id="pageHeader" runat="server" CssClass="righty">
    <asp:TextBox ID="searchInput" runat="server" CssClass="searchTerm">
    </asp:TextBox>
    <asp:Button ID="searchButton" runat="server" CssClass="btn" Text="Search" onclick="searchButton_Click" />

This may result in an additional control being posted back - and so is slightly worse performance-wise - but I think it improves readability somewhat.